chore(docs): add how-to's for angular material inclusion #3897
Conversation
jeremymwells
force-pushed
the
docs-angular-material
branch
3 times, most recently
from
49f8420 to
682ac28
Compare
| Install the `@angular/material` library and add the dependency to package.json... | ||
| ```bash | ||
| npm install --save @angular/material | ||
|
|
|
|
||
| Create a new project and navigate into the project... | ||
| ``` | ||
| ng new my-app && cd my-app |
| 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... | ||
| ```css |
There was a problem hiding this comment.
This is sass typing, not css.
| - [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.
I think Flex Layout is a separate library and should have its own guide, since you can use it without Material. I'm asking around.
There was a problem hiding this comment.
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.
@hansl - am I to do a separate PR for the flex stuff?
| ng new my-app && cd my-app | ||
| ``` | ||
|
|
||
| With the new project created and ready, you will next need to install Angular Material. |
There was a problem hiding this comment.
Remove this line, it's just repeating the lines above and below it.
|
|
||
| Import the Angular Material NgModule into your app module... | ||
| ```javascript | ||
| //in src/app/app.module.ts --> |
| ], | ||
| ... | ||
| }) | ||
|
|
|
|
||
| ``` | ||
|
|
||
| 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`. |
There was a problem hiding this comment.
prebuilt/ is a directory, you should end that path with an extra / to indicate so.
| @import '~https://fonts.googleapis.com/icon?family=Material+Icons'; | ||
| ``` | ||
|
|
||
| Run `ng serve` to run your application in develop mode, and navigate to `http://localhost:4200`. |
|
|
||
| Run `ng serve` to run your application in develop 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... |
There was a problem hiding this comment.
Capital A and capital M to Angular Material, here and everywhere else.
jeremymwells
force-pushed
the
docs-angular-material
branch
2 times, most recently
from
22ab909 to
bed3566
Compare
There was a problem hiding this comment.
@hansl - all changes made (minus undecided Flex-Layout scenario). Lmk.
| - [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.
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.
jeremymwells
force-pushed
the
docs-angular-material
branch
2 times, most recently
from
981efdc to
6123429
Compare
jeremymwells
force-pushed
the
docs-angular-material
branch
2 times, most recently
from
3a0cc02 to
6dd682d
Compare
jeremymwells
changed the title
|
Can you please rebase |
jeremymwells
force-pushed
the
docs-angular-material
branch
from
6dd682d to
feefa35
Compare
…lex layout inclusion applies to angular#2711
…lex layout inclusion applies to angular#2711 Close angular#3897
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
applies to #2711