Mudanças entre as edições de "Installing Angular Material"
De Basef
Linha 14: | Linha 14: | ||
<source lang="xml"> | <source lang="xml"> | ||
<link href="https://fonts.goggleapis.com/icon?family=Material+Icons" rel="stylesheet" /> | <link href="https://fonts.goggleapis.com/icon?family=Material+Icons" rel="stylesheet" /> | ||
+ | </source> | ||
+ | |||
+ | Create a MaterialModule class: | ||
+ | |||
+ | <source lang="javascript"> | ||
+ | import { NgModule } from '@angular/core'; | ||
+ | |||
+ | import { | ||
+ | MatButtonModule, | ||
+ | MatMenuModule, | ||
+ | MatToolbarModule, | ||
+ | MatIconModule, | ||
+ | MatCardModule | ||
+ | } from '@angular/material'; | ||
+ | |||
+ | @NgModule({ | ||
+ | imports: [ | ||
+ | MatButtonModule, | ||
+ | MatMenuModule, | ||
+ | MatToolbarModule, | ||
+ | MatIconModule, | ||
+ | MatCardModule | ||
+ | ], | ||
+ | exports: [ | ||
+ | MatButtonModule, | ||
+ | MatMenuModule, | ||
+ | MatToolbarModule, | ||
+ | MatIconModule, | ||
+ | MatCardModule | ||
+ | ] | ||
+ | }) | ||
+ | export class MaterialModule {} | ||
</source> | </source> | ||
Linha 19: | Linha 51: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
− | import { MaterialModule } from ' | + | import { MaterialModule } from './material.module'; |
</source> | </source> | ||
Edição das 12h51min de 27 de abril de 2018
Angular Material has some great components ready to use in your project: https://material.angular.io/
Configuration
1) Install Angular Material
npm install --save @angular/material npm install --save @angular/cdk
Go to your index.html and add this inside <head>:
<link href="https://fonts.goggleapis.com/icon?family=Material+Icons" rel="stylesheet" />
Create a MaterialModule class:
import { NgModule } from '@angular/core'; import { MatButtonModule, MatMenuModule, MatToolbarModule, MatIconModule, MatCardModule } from '@angular/material'; @NgModule({ imports: [ MatButtonModule, MatMenuModule, MatToolbarModule, MatIconModule, MatCardModule ], exports: [ MatButtonModule, MatMenuModule, MatToolbarModule, MatIconModule, MatCardModule ] }) export class MaterialModule {}
Go to your modules file and import MaterialModule:
import { MaterialModule } from './material.module';
Add MaterialModule module to imports section of NgModule.
2) You may also need to import Angular Animations:
npm install --save @angular/animations
Go to your modules file and import BrowserAnimationsModule:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
Add BrowserAnimationsModule module to imports section of NgModule.
3) And also gestures library:
npm install --save hammerjs
Go to your modules file and import BrowserAnimationsModule:
import 'hammerjs';
4) Also, you may install Angular Flex layout:
npm install --save @angular/flex-layout
import { FlexLayoutModule } from '@angular/flex-layout';
Add FlexLayoutModule module to imports section of NgModule.
View example
<md-toolbar color="primary"> <span>Ristorante Con Fusion<span> </md-toolbar>
In your main scss file
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';