Skip to content

Commit 36503dd

Browse files
Broccohansl
authored andcommitted
docs: Update Angular Material story to defer to the Material docs
Fixes #7286
1 parent c66c66b commit 36503dd

File tree

1 file changed

+1
-57
lines changed

1 file changed

+1
-57
lines changed

docs/documentation/stories/include-angular-material.md

Lines changed: 1 addition & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,6 @@
11
# Include [Angular Material](https://material.angular.io)
22

3-
[Angular Material](https://material.angular.io) is a set of Material Design components for Angular apps.
4-
This guide will walk you through adding material design to your Angular CLI project and configuring it to use Angular Material.
5-
6-
Create a new project and navigate into the project...
7-
```
8-
ng new my-app
9-
cd my-app
10-
```
11-
12-
Install the `@angular/material` library and add the dependency to package.json...
13-
```bash
14-
npm install --save @angular/material @angular/cdk
15-
```
16-
17-
Import the Angular Material NgModule into your app module...
18-
```javascript
19-
//in src/app/app.module.ts
20-
21-
import { MaterialModule } from '@angular/material';
22-
// other imports
23-
24-
@NgModule({
25-
imports: [
26-
...
27-
MaterialModule
28-
],
29-
...
30-
})
31-
```
32-
33-
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/prebuilt-themes/`.
34-
35-
To add an angular CSS theme and material icons to your app...
36-
```sass
37-
/* in src/styles.css */
38-
39-
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
40-
@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
41-
```
42-
43-
Run `ng serve` to run your application in development mode, and navigate to `http://localhost:4200`.
44-
45-
To verify Angular Material has been set up correctly, change `src/app/app.component.html` to the following...
46-
```html
47-
<h1>
48-
{{title}}
49-
</h1>
50-
51-
<button md-raised-button>
52-
Angular Material works!
53-
<md-icon>done</md-icon>
54-
</button>
55-
```
56-
57-
After saving this file, return to the browser to see the Angular Material styled button.
58-
59-
### More Info
3+
[Angular Material](https://material.angular.io) is a set of Material Design components for Angular apps. To get started please visit these links to the Angular Material project:
604

615
- [Getting Started](https://material.angular.io/guide/getting-started)
626
- [Theming Angular Material](https://material.angular.io/guide/theming)

0 commit comments

Comments
 (0)