9 مرحله استفاده از angular material در پروژه های انگولار

5/24/2020 MVC
2640

استفاده از angular material در پروژه های انگولار

 

نصب انگولار بر روی سیستم 

npm install -g @angular/cli

ایجاد پروژه انگولار

ng new my-angular-material-project

اضافه کردن انگولار متریال 

ng add @angular/material

اضافه کردن them  انگولار متریال به فایل style  پروژه 

 

معرفی module  متریال به module  اصلی  پروژه

 

اضافه کردن module  مربوط به انگولار متریال به پروژه و اضافه کردن ابزار های لازم به صورت تکی به پروژه مثال : slider

import { MatSliderModule } from '@angular/material/slider';
…
@NgModule ({....
  imports: [...,
  MatSliderModule,
…]
})

 

اضافه کردن animation  به module  اصلی پروژه

 



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

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  declarations: [ ],
  bootstrap: [ ]
})
export class AppModule { }

اضافه کردن hammer.js  به پروژه

npm install hammerjs

اضافه کردن ایکونهای angular maerial  به پروژه (اضافه کردن به فایل style.cass)

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">