How to make custom design using material design

Posted By : Shivam Gupta | 31-Jul-2018

Angular2

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>