-
Notifications
You must be signed in to change notification settings - Fork 12k
chore(docs): add how-to's for angular material inclusion #3897
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
<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 | ||
|
||
- [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) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. That is correct. I considered a separate guide for it, but stitching them together made sense when I considered that they currently ship together for v1. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @hansl - am I to do a separate PR for the flex stuff? |
||
|
||
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 | ||
<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. | ||
|
||
### 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) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
prebuilt/
is a directory, you should end that path with an extra/
to indicate so.