Skip to content

Commit c38c9c3

Browse files
authored
chore: update getting-started guide for beta.3 (#3986)
No longer mentions `MaterialModule` and instead offers some guidance on building your own NgModule for Angular Material components.
1 parent 2a1a070 commit c38c9c3

File tree

2 files changed

+27
-13
lines changed

2 files changed

+27
-13
lines changed

guides/getting-started.md

+25-12
Original file line numberDiff line numberDiff line change
@@ -43,22 +43,36 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
4343
export class PizzaPartyAppModule { }
4444
```
4545

46-
## Step 3: Import the Module
46+
## Step 3: Import the component modules
4747

48-
Add MaterialModule as an import in your app's root NgModule.
48+
Import the NgModule for each component you want to use:
4949

5050
```ts
51-
import {MaterialModule} from '@angular/material';
51+
import {MdButtonModule, MdCheckboxModule} from '@angular/material';
5252

5353
@NgModule({
5454
...
55-
imports: [MaterialModule],
55+
imports: [MdButtonModule, MdCheckboxModule],
5656
...
5757
})
5858
export class PizzaPartyAppModule { }
5959
```
6060

61-
## Step 4: Include Theming
61+
Alternatively, you can create a separate NgModule that imports all of the
62+
Angular Material components that you will use in your application. You can then
63+
include this module wherever you'd like to use the components.
64+
65+
```ts
66+
import {MdButtonModule, MdCheckboxModule} from '@angular/material';
67+
68+
@NgModule({
69+
imports: [MdButtonModule, MdCheckboxModule],
70+
exports: [MdButtonModule, MdCheckboxModule],
71+
})
72+
export class MyOwnCustomMaterialModule { }
73+
```
74+
75+
## Step 4: Include a theme
6276

6377
Including a theme is **required** to apply all of the core and theme styles to your application.
6478

@@ -95,8 +109,8 @@ import 'hammerjs';
95109

96110
## Step 6 (Optional): Add Material Icons
97111

98-
If you want your `md-icon` components to use [Material Icons](https://material.io/icons/),
99-
load the font in your `index.html`.
112+
If you want to use the `md-icon` component with the official
113+
[Material Design Icons](https://material.io/icons/), load the icon font in your `index.html`.
100114

101115
```html
102116
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@@ -105,11 +119,10 @@ load the font in your `index.html`.
105119
For more information on using Material Icons, check out the
106120
[Material Icons Guide](https://google.github.io/material-design-icons/).
107121

108-
Note that `md-icon` has support for any font or svg icons, so using Material Icons is
109-
just one option.
122+
Note that `md-icon` supports any font or svg icons; using Material Icons is one of many options.
110123

111124

112-
## Configuring SystemJS
125+
## Appendix: Configuring SystemJS
113126

114127
If your project is using SystemJS for module loading, you will need to add `@angular/material`
115128
to the SystemJS configuration:
@@ -118,9 +131,9 @@ to the SystemJS configuration:
118131
System.config({
119132
// existing configuration options
120133
map: {
121-
...
134+
// ...
122135
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
123-
...
136+
// ...
124137
}
125138
});
126139
```

guides/theming.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,8 @@ With this, any element inside of a parent with the `unicorn-dark-theme` class wi
134134
dark theme.
135135

136136
### Theming your own components
137-
For more details about theming your own components, see [theming-your-components.md](https://github.com/angular/material2/blob/master/guides/theming-your-components.md)
137+
For more details about theming your own components,
138+
see [theming-your-components.md](./theming-your-components.md)
138139

139140
### Future work
140141
* Once CSS variables (custom properties) are available in all the browsers we support,

0 commit comments

Comments
 (0)