From 8efda3e42c84c1c1d0576769ff2e6ff4c9fc5a90 Mon Sep 17 00:00:00 2001 From: Sergey Fetiskin Date: Wed, 25 Jul 2018 22:21:39 +0200 Subject: [PATCH 1/2] animation guide updated --- guides/getting-started.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/guides/getting-started.md b/guides/getting-started.md index 5c3d8a7b544b..66908f1f1189 100644 --- a/guides/getting-started.md +++ b/guides/getting-started.md @@ -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. #### NPM ```bash @@ -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. + ```ts import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @@ -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`. ```ts import {NoopAnimationsModule} from '@angular/platform-browser/animations'; From 2761da91b061b0cc8ca7c567f91e95060aad0ff4 Mon Sep 17 00:00:00 2001 From: Sergey Fetiskin Date: Thu, 26 Jul 2018 07:55:34 +0200 Subject: [PATCH 2/2] update after code review --- guides/getting-started.md | 28 ++++++++-------------------- 1 file changed, 8 insertions(+), 20 deletions(-) diff --git a/guides/getting-started.md b/guides/getting-started.md index 66908f1f1189..1e333cb0913e 100644 --- a/guides/getting-started.md +++ b/guides/getting-started.md @@ -3,17 +3,17 @@ For help getting started with a new Angular app, check out the For existing apps, follow these steps to begin using Angular Material. -### Step 1: Install Angular Material and Angular CDK +### Step 1: Install Angular Material, Angular CDK and Angular Animations You can use either the npm or yarn command-line tool to install packages. Use whichever is appropriate for your project in the examples below. #### NPM ```bash -npm install --save @angular/material @angular/cdk +npm install --save @angular/material @angular/cdk @angular/animations ``` #### Yarn ```bash -yarn add @angular/material @angular/cdk +yarn add @angular/material @angular/cdk @angular/animations ``` @@ -24,29 +24,17 @@ build should not be considered stable and may break between releases. #### NPM ```bash -npm install --save angular/material2-builds angular/cdk-builds +npm install --save angular/material2-builds angular/cdk-builds angular/animations-builds ``` #### Yarn ```bash -yarn add angular/material2-builds angular/cdk-builds +yarn add angular/material2-builds angular/cdk-builds angular/animations-builds ``` -### Step 2: Animations +### Step 2: Configure animations -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. - -#### NPM -```bash -npm install --save @angular/animations -``` - -#### Yarn -```bash -yarn add @angular/animations -``` - -If you want to provide animations for these components include the `BrowserAnimationsModule` in your app. +Once the animations package is installed, import `BrowserAnimationsModule` into your application to enable animations support. ```ts import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @@ -59,7 +47,7 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; export class PizzaPartyAppModule { } ``` -If you want to disable animation for these components you can use the `NoopAnimationsModule`. +Alternatively, you can disable animations by importing `NoopAnimationsModule`. ```ts import {NoopAnimationsModule} from '@angular/platform-browser/animations';