Skip to content

docs: Getting started guide update about animations #12377

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

Merged
merged 2 commits into from
Jul 26, 2018
Merged

docs: Getting started guide update about animations #12377

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8efda3e
animation guide updated
fetis Jul 25, 2018
2761da9
update after code review
fetis Jul 26, 2018
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
8 changes: 4 additions & 4 deletions guides/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,7 @@ yarn add angular/material2-builds angular/cdk-builds

### Step 2: Animations

Some Material components depend on the Angular animations module in order to be able to do
more advanced transitions. If you want these animations to work in your app, you have to
install the `@angular/animations` module and include the `BrowserAnimationsModule` in your app.
Animations package is required to build application with Material components, but you don't have to configure it unless you use animated components like Drawer, Bottom Sheet etc.
Copy link
Member

Choose a reason for hiding this comment

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

nit: "Material components" -> "Angular Material"

Copy link
Member

Choose a reason for hiding this comment

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

Another nit: "Animations package" -> "The @angular/animations package"

Copy link
Member

Choose a reason for hiding this comment

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

I would omit the part "but you don't have to configure it unless you use animated components like Drawer, Bottom Sheet etc." since we might end up adding animations to other components in the future. For the getting started guide, it's simpler to always tell people to add an animations module.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@jelbourn what do you think about to move the installation part to the Step 1 and here to leave only configuration of Browser/Noop animation.

Copy link
Member

Choose a reason for hiding this comment

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

That makes sense to me.


#### NPM
```bash
Expand All @@ -48,6 +46,8 @@ npm install --save @angular/animations
yarn add @angular/animations
```

If you want to provide animations for these components include the `BrowserAnimationsModule` in your app.
Copy link
Member

Choose a reason for hiding this comment

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

I would phrase this as

Once the animations package is installed, import `BrowserAnimationsModule` into your application.


```ts
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

Expand All @@ -59,7 +59,7 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
export class PizzaPartyAppModule { }
```

If you don't want to add another dependency to your project, you can use the `NoopAnimationsModule`.
If you want to disable animation for these components you can use the `NoopAnimationsModule`.
Copy link
Member

Choose a reason for hiding this comment

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

I would phrase this as

Alternatively, you can disable animations by importing `NoopAnimationsModule`.


```ts
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
Expand Down