How to make custom design using material design
Posted By : Shivam Gupta | 31-Jul-2018
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
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>
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Shivam Gupta
Shivam is a versatile UI developer with html, css, scss, js, angularjs technologies. He likes chess, cricket and reading book.