3.8 KiB
Include Angular Material
Angular Material is a set of Material Design components for Angular apps. This guide will walk you through adding material design to your Angular CLI project and configuring it to use Angular Material.
Create a new project and navigate into the project...
ng new my-app
cd my-app
Install the @angular/material library and add the dependency to package.json...
npm install --save @angular/material
Import the Angular Material NgModule into your app module...
//in src/app/app.module.ts
import { MaterialModule } from '@angular/material';
// other imports
@NgModule({
imports: [
...
MaterialModule.forRoot()
],
...
})
Now that the project is set up, it must be configured to include the CSS for a theme. Angular Material ships with some prebuilt theming, which is located in node_modules/@angular/material/core/theming/prebuilt.
To add an angular CSS theme and material icons to your app...
/* in src/styles.css */
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
Run ng serve to run your application in development mode, and navigate to http://localhost:4200.
To verify Angular Material has been set up correctly, change src/app/app.component.html to the following...
<h1>
{{title}}
</h1>
<button md-raised-button>
Angular Material works!
<md-icon>done</md-icon>
</button>
After saving this file, return to the browser to see the Angular Material styled button.
More Info
Include Flex Layout for Angular Material
Include Angular Material as detailed above.
Install the @angular/flex-layout library and add the dependency to package.json...
npm install --save @angular/flex-layout
Import the Angular Flex-Layout NgModule into your app module...
//in src/app/app.module.ts
import { FlexLayoutModule } from '@angular/flex-layout';
// other imports
@NgModule({
imports: [
...
FlexLayoutModule.forRoot()
],
...
})
Run ng serve to run your application in develop mode, and navigate to http://localhost:4200
Add the following to src/app/app.component.css...
.header {
background-color: lightyellow;
}
.left {
background-color: lightblue;
}
.right {
background-color: pink;
}
To verify flex-layout has been set up correctly, change src/app/app.component.html to the following...
<div fxLayout="column">
<div class="header" fxLayout="row" fxLayoutAlign="space-between center">
<h1>
{{title}}
</h1>
<button md-raised-button>
Angular Material works!
<md-icon>done</md-icon>
</button>
</div>
<div fxLayout="row">
<div class="left" fxFlex="20">
LEFT: 20% wide
</div>
<div class="right" fxFlex>
RIGHT: 80% wide
</div>
</div>
</div>
After saving this file, return to the browser to see the very ugly but demonstrative flex-layout.
Among what you should see are - a light yellow header that is the entire width of the window, sitting directly atop 2 columns. Of those 2 columns, the left column should be light blue, and 20% wide, while the right column is pink, 80% to start, and will flex with window (re)size.