Mudanças entre as edições de "Installing Angular Material"

De Basef
Ir para: navegação, pesquisa
(Criou página com 'Angular Material has some great components ready to use in your project: https://material.angular.io/ <source lang="bash"> npm install --save @angular/material </source> C...')
 
 
(20 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/
  
 +
 +
== 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>
  
−
[[Category: AngularJS2]]
+
Go to your index.html and add this inside '''<head>''':
 +
 
 +
<source lang="xml">
 +
<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>
 +
 
 +
Go to your modules file and import '''MaterialModule''':
 +
 
 +
<source lang="javascript">
 +
import { MaterialModule } from './material.module';
 +
</source>
 +
 
 +
Add '''MaterialModule''' module to '''imports''' section of '''NgModule'''.
 +
 
 +
 
 +
'''2) You may also need to import Angular Animations:'''
 +
 
 +
<source lang="bash">
 +
npm install --save @angular/animations
 +
</source>
 +
 
 +
Go to your modules file and import '''BrowserAnimationsModule''':
 +
 
 +
<source lang="javascript">
 +
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 +
</source>
 +
 
 +
Add '''BrowserAnimationsModule''' module to '''imports''' section of '''NgModule'''.
 +
 
 +
 
 +
'''3) And also gestures library:'''
 +
 
 +
<source lang="bash">
 +
npm install --save hammerjs
 +
</source>
 +
 
 +
Go to your modules file and import '''BrowserAnimationsModule''':
 +
 
 +
<source lang="javascript">
 +
import 'hammerjs';
 +
</source>
 +
 
 +
 
 +
'''4) Also, you may install Angular Flex layout:'''
 +
<source lang="bash">
 +
npm install --save @angular/flex-layout
 +
</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: 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';
Disponível em "http://www.basef.com.br/index.php?title=Installing_Angular_Material&oldid=2294"