Angular 6 for Enterprise-Ready Web Applications

Configuring Material and Styles

We will also need to set up Angular Material and configure a theme to use, as covered in Chapter 5, Enhance Angular App with Angular Material:

1. Install Angular Material:

$ npx ng add @angular/material$ npm i @angular/flex-layout hammerjs $ npx ng g m material --flat -m app

2. Import and export MatButtonModule, MatToolbarModule, and MatIconModule
3. Configure your default theme and register other Angular dependencies
4. Add common css to styles.css as shown below,

src/styles.cssbody {  margin: 0;}.margin-top {  margin-top: 16px;}.horizontal-padding {  margin-left: 16px;  margin-right: 16px;}.flex-spacer {  flex: 1 1 auto;}

Refer to Chapter 5, Enhance Angular App with Angular Material, for further configuration details. ...