استفاده از تمهای پیشفرض انگولار متریال default them of angular material در پروژه انگولار

5/29/2020 MVC
2369

در این پست تعدادی از پکیج های لازم در انگولار رو لیست کردم یکی از آنها angular materail  است که با دستور 

 

ng add @angular/material

در خط فرمان پروژه به پروژه انگولار اضافه خواهد شد

 

انگولار متریال از 4 تم پیشفرض استفاده میکند که در زمان نصب انگولار متریال از شما پرسیده  میشود و به صورت اتوماتیک در فایل angular,json اضافه خواهد شد.

لیست این تم های پیش فرض را میتوانید در پوشه node_modules/@angular/material/ prebuilt-themes ببنید و از انها استفاده کنید

پس از آن لازم است تا BrowserAnimationsModule برای این در app.module.ts  این خط را اضافه کنید

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

برای استفاده از هر کدام از component های آن angular material  و اصل تبدیل پروژه به پروژه های  کوچکتر میتوان یک module دیگر به پروژه اضافه کرد.

مثلا به نام angular.material.ts 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';


@NgModule({
  declarations: [],
  imports: [CommonModule,],
  exports: [],
})
export class MaterialModule {}

و کامپوننت های مورد نیاز رابه آن اضافه کرد

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { MatSliderModule } from '@angular/material/slider';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  declarations: [],
  imports: [CommonModule, MatSliderModule, MatFormFieldModule],
  exports: [MatSliderModule, MatFormFieldModule],
})
export class MaterialModule {}

البته میتوانید خودتان نیز تم خودتان را بسازید که در مستندات در سایت خود angular material آمده است