Skip to content
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.

Sign up for GitHub

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

chore: update getting-started guide for beta.3 #3986

Merged
merged 1 commit into from
Apr 9, 2017
Merged

chore: update getting-started guide for beta.3 #3986

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 25 additions & 12 deletions guides/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,22 +43,36 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
export class PizzaPartyAppModule { }
```

## Step 3: Import the Module
## Step 3: Import the component modules

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

```ts
import {MaterialModule} from '@angular/material';
import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
...
imports: [MaterialModule],
imports: [MdButtonModule, MdCheckboxModule],
...
})
export class PizzaPartyAppModule { }
```

## Step 4: Include Theming
Alternatively, you can create a separate NgModule that imports all of the
Angular Material components that you will use in your application. You can then
include this module wherever you'd like to use the components.

```ts
import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
imports: [MdButtonModule, MdCheckboxModule],
exports: [MdButtonModule, MdCheckboxModule],
})
export class MyOwnCustomMaterialModule { }
```

## Step 4: Include a theme

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

Expand Down Expand Up @@ -95,8 +109,8 @@ import 'hammerjs';

## Step 6 (Optional): Add Material Icons

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

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

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


## Configuring SystemJS
## Appendix: Configuring SystemJS

If your project is using SystemJS for module loading, you will need to add `@angular/material`
to the SystemJS configuration:
Expand All @@ -118,9 +131,9 @@ to the SystemJS configuration:
System.config({
// existing configuration options
map: {
...
// ...
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
...
// ...
}
});
```
Expand Down
3 changes: 2 additions & 1 deletion guides/theming.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,8 @@ With this, any element inside of a parent with the `unicorn-dark-theme` class wi
dark theme.

### Theming your own components
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)
For more details about theming your own components,
see [theming-your-components.md](./theming-your-components.md)
Copy link
Member

@crisbeto crisbeto Apr 9, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps this should link to material.angular.io?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a bit of code in the gulp docs task that makes the links point to the right place on the docs site.


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