You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: guides/getting-started.md
+25-13Lines changed: 25 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -1,22 +1,30 @@
1
1
# Getting Started with Angular Material
2
2
3
-
This guide explains how to set up your Angular project to begin using Angular Material. It includes information on prerequisites, installing Angular Material, and optionally displaying a sample material component in your application to verify your setup.
3
+
This guide explains how to set up your Angular project to begin using Angular Material. It includes
4
+
information on prerequisites, installing Angular Material, and optionally displaying a sample
5
+
Material component in your application to verify your setup.
4
6
5
7
*Angular Resources*
6
8
7
-
If you are new to Angular or getting started with a new Angular application, see [Angular's full Getting Started Guide](https://angular.io/start) and [Setting up your environment](https://angular.io/guide/setup-local).
9
+
If you are new to Angular or getting started with a new Angular application, see
10
+
[Angular's full Getting Started Guide](https://angular.io/start) and
11
+
[Setting up your environment](https://angular.io/guide/setup-local).
8
12
9
13
For existing applications, follow the steps below to begin using Angular Material.
10
14
11
15
## Install Angular Material
12
16
13
-
Use the Angular CLI's installation [schematic](https://material.angular.io/guide/schematics) to set up your Angular Material project by running the following command:
17
+
Use the Angular CLI's installation [schematic](https://material.angular.io/guide/schematics) to set
18
+
up your Angular Material project by running the following command:
14
19
15
20
```bash
16
21
ng add @angular/material
17
22
```
18
23
19
-
The `ng add` command will install Angular Material, the [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories), [Angular Animations](https://angular.io/guide/animations) and ask you the following questions to determine which features to include:
24
+
The `ng add` command will install Angular Material, the
25
+
[Component Dev Kit (CDK)](https://material.angular.io/cdk/categories),
26
+
[Angular Animations](https://angular.io/guide/animations) and ask you the following questions to
27
+
determine which features to include:
20
28
21
29
1. Choose a prebuilt theme name, or "custom" for a custom theme:
22
30
@@ -30,7 +38,7 @@ The `ng add` command will install Angular Material, the [Component Dev Kit (CDK)
30
38
31
39
Importing the [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) into your application enables Angular's [animation system](https://angular.io/guide/animations). Declining this will disable most of Angular Material's animations.
32
40
33
-
The `ng add` command will additionally perform the following configurations:
41
+
The `ng add` command will additionally perform the following actions:
34
42
35
43
* Add project dependencies to `package.json`
36
44
* Add the Roboto font to your `index.html`
@@ -47,16 +55,18 @@ You're done! Angular Material is now configured to be used in your application.
47
55
48
56
Let's display a slider component in your app and verify that everything works.
49
57
50
-
You need to import the `MatSliderModule` that you want to display by adding the following lines to your app.module.ts file.
58
+
You need to import the `MatSliderModule` that you want to display by adding the following lines to
Add the `<mat-slider>` tag to the `app.component.html` like so:
@@ -73,6 +83,8 @@ ng serve
73
83
74
84
Then point your browser to [http://localhost:4200](http://localhost:4200)
75
85
76
-
You should see the material slider component on the page.
86
+
You should see the Material slider component on the page.
77
87
78
-
In addition to the installation schematic, Angular Material comes with [several schematics](https://material.angular.io/guide/schematics) (like nav, table, address-form, etc.) that can be used to easily generate pre-built components in your application.
88
+
In addition to the installation schematic, Angular Material comes with
89
+
[several other schematics](https://material.angular.io/guide/schematics) (like nav, table,
90
+
address-form, etc.) that can be used to easily generate pre-built components in your application.
0 commit comments