diff --git a/docs/documentation/stories/include-angular-material.md b/docs/documentation/stories/include-angular-material.md new file mode 100644 index 000000000000..6fbcaba7a387 --- /dev/null +++ b/docs/documentation/stories/include-angular-material.md @@ -0,0 +1,146 @@ +# Include [Angular Material](https://material.angular.io) + +[Angular Material](https://material.angular.io) 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... +```bash +npm install --save @angular/material +``` + +Import the Angular Material NgModule into your app module... +```javascript +//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... +```sass +/* 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... +```html +

+ {{title}} +

+ + +``` + +After saving this file, return to the browser to see the Angular Material styled button. + +### More Info + + - [Getting Started](https://material.angular.io/guide/getting-started) + - [Theming Angular Material](https://material.angular.io/guide/theming) + - [Theming your own components](https://material.angular.io/guide/theming-your-components) + +# Include [Flex Layout](https://github.com/angular/flex-layout) for [Angular Material](https://material.angular.io) + +Include Angular Material as detailed above. + +Install the `@angular/flex-layout` library and add the dependency to package.json... +```bash +npm install --save @angular/flex-layout +``` + +Import the Angular Flex-Layout NgModule into your app module... +```javascript +//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`... +```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... +```html +
+ +
+ +

+ {{title}} +

+ + + +
+ +
+ +
+ LEFT: 20% wide +
+ +
+ RIGHT: 80% wide +
+ +
+
+``` + +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. + +### More Info + + - [Installation](https://github.com/angular/flex-layout#installation) + - [API Overview](https://github.com/angular/flex-layout/wiki/API-Overview) + - [Demo](https://tburleson-layouts-demos.firebaseapp.com/#/docs)