Blog

  • Angular Material is a collection of UI components which is designed by the Angular team. Angular material uses different types of component like dropdown, checkbox, radio box, input-text, text-area etc.

    1) - Material is the metaphor.
    2) - Bold, graphics, intentional.
    3) - Motion provides meaning.

    Installation of material design: - by using npm we can install material design in our project
         
    npm install @angular/material --save

    Importing of a material module in app.module.ts: -

    for using the material module in any component first we import it in app module. First we import BrowserAnimationModule from @angular/platform-browser/animation part. This module is used for animation purpose in an angular material component. After then we use the different module for a component purpose like MdButtonModule for button purpose, MdMenuModule for menu items, MdIconModule for icon section. 

                    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { MaterialModule, MdButtonModule, MdCardModule, MdMenuModule,
    MdToolbarModule, MdIconModule } from '@angular/material';
    @NgModule({
    ...
    imports: [
    BrowserModule,
    HttpModule,
    BrowserAnimationsModule,
    MaterialModule,
    MdButtonModule, 
    MdCardModule, 
    MdMenuModule,
    MdToolbarModule, 
    MdIconModule
    ],
    ...
    })
    export class AppModule { } 
            

    export class AppModule { }     
            
    Using themes in project: - 
      there are several themes available in this package, for using a specific theme in our project we import that theme in scss file.
      ex: - @import '~@angular/material/prebuilt-themes/deep purple-amber.css';

    Angular material template use: - after importing a specific component in-app module, we can use that component in our project.
    ex: -

                 <md-toolbar color="primary">
    <span>App Name</span>
    <span class="example-spacer"></span>
    <button md-button [mdMenuTriggerFor]="appMenu"><md-icon>menu</md-icon> Menu</button>
    </md-toolbar>
    <md-menu #appMenu="mdMenu">
    <button md-menu-item> Settings </button>
    <button md-menu-item> Contact </button>
    </md-menu>         
            

     

Tags: Angular2