Mudanças entre as edições de "Installing Angular Material"
De Basef
| (14 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
| Linha 1: | Linha 1: | ||
Angular Material has some great components ready to use in your project: https://material.angular.io/ | Angular Material has some great components ready to use in your project: https://material.angular.io/ | ||
| − | 1) Install Angular Material | + | |
| + | == Configuration == | ||
| + | |||
| + | |||
| + | '''1) Install Angular Material''' | ||
<source lang="bash"> | <source lang="bash"> | ||
npm install --save @angular/material | npm install --save @angular/material | ||
| + | npm install --save @angular/cdk | ||
</source> | </source> | ||
| Linha 9: | Linha 14: | ||
<source lang="xml"> | <source lang="xml"> | ||
| − | <link href="https://fonts. | + | <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> |
| + | </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 15: | Linha 52: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
| − | import { MaterialModule } from ' | + | import { MaterialModule } from './material.module'; |
</source> | </source> | ||
| + | Add '''MaterialModule''' module to '''imports''' section of '''NgModule'''. | ||
| − | 2) You may also need to import Angular Animations: | + | |
| + | '''2) You may also need to import Angular Animations:''' | ||
<source lang="bash"> | <source lang="bash"> | ||
| Linha 28: | Linha 67: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
| − | import { BrowserAnimationsModule } from '@angular/platform-browser'; | + | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; |
</source> | </source> | ||
| − | 3) And also gestures library: | + | Add '''BrowserAnimationsModule''' module to '''imports''' section of '''NgModule'''. |
| + | |||
| + | |||
| + | '''3) And also gestures library:''' | ||
<source lang="bash"> | <source lang="bash"> | ||
| Linha 43: | Linha 85: | ||
</source> | </source> | ||
| − | 4) Also, you may install Angular Flex layout: | + | |
| + | '''4) Also, you may install Angular Flex layout:''' | ||
<source lang="bash"> | <source lang="bash"> | ||
npm install --save @angular/flex-layout | npm install --save @angular/flex-layout | ||
</source> | </source> | ||
| + | Go to your modules file and import '''FlexLayoutModule''': | ||
| + | |||
| + | <source lang="javascript"> | ||
| + | import { FlexLayoutModule } from '@angular/flex-layout'; | ||
| + | </source> | ||
| + | |||
| + | Add '''FlexLayoutModule''' module to '''imports''' section of '''NgModule'''. | ||
| + | |||
| + | |||
| + | == View example == | ||
| + | |||
| + | <source lang="xml"> | ||
| + | <mat-toolbar color="primary"> | ||
| + | <span>Ristorante Con Fusion</span> | ||
| + | </mat-toolbar> | ||
| + | </source> | ||
| + | |||
| + | == In your main scss file == | ||
| + | |||
| + | <source lang="css"> | ||
| + | @import '~@angular/material/prebuilt-themes/indigo-pink.css'; | ||
| + | </source> | ||
| − | [[Category: | + | [[Category: Angular]] |
Edição atual tal como às 10h38min de 27 de janeiro de 2020
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 rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">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
Go to your modules file and import FlexLayoutModule:
import { FlexLayoutModule } from '@angular/flex-layout';
Add FlexLayoutModule module to imports section of NgModule.
View example
<mat-toolbar color="primary"> <span>Ristorante Con Fusion</span> </mat-toolbar>
In your main scss file
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
