Modifications made by installing Angular Material

Let's quickly review what modifications the Angular CLI makes to install the Angular Material library. This is quite common when we install third-party libraries that don't support ng add schematics. In this section, we'll take a look at what we should do when we see a new component library for Angular. Let's take a look at these modifications:

  1. The angular.json file gets an extra reference in the styles array:
      "styles": 
[
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
  1. The index.html page now contains two extra fonts, Roboto and Material Icons. Check out https://material.io/tools/icons to see what icons are available for your application when you install Angular Material components such as MatIcon:
      <link href="https://fonts.googleapis.com/css?
family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
  1. The main.ts file gets an additional import for the hammerjs library. This is a prerequisite for various Angular Material components when we need to deal with various touch and gesture operations.
  2. The styles.scss files has been updated with some minor enhancements to the application style and to the new default font that points to Roboto:
      html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue",
sans-serif; }
  1. Finally, the src/app/app.module.ts file now imports and uses BrowserAnimationsModule.

As you can see, you have just managed to update numerous files by running a single ng add command. In the future, you may see more and more libraries supporting this form of installation since it's straightforward and convenient compared to the manual setup option.

Now, let's look at how to use components from the Angular Material package.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.25.74