Angular 10 Tutorial #6 - Install Angular Material in Angular App | Angular 10 Tutorial For Beginners
How to Install Angular Material in Angular Applications
Introduction to the Tutorial Series
- The tutorial is part of a comprehensive series on Angular 10 aimed at absolute beginners, with around 100 planned episodes.
- Previous episodes covered installing Bootstrap in Angular applications; this episode focuses on installing Angular Material.
Installing Angular Material
- To install Angular Material, use the command:
ng add @angular/material. This command simplifies the installation process.
- After running the command, users will be prompted to select a pre-built theme. Beginners are advised to choose an existing theme like "Indigo Pink" for simplicity.
Configuration Options During Installation
- Users will be asked if they want to set up global typography using Roboto font; selecting 'yes' links this font in the
index.htmlfile.
- The installation also prompts for setting up browser animations for Angular Material, which enhances UI interactions.
Package Updates and Confirmation
- The command updates
package.jsonandangular.json, importing necessary styles and libraries automatically during installation.
- Successful installation is confirmed by messages indicating that packages have been updated and added correctly.
Practical Implementation of Angular Material
- After installation, users can check functionality by importing modules such as
MatButtonModuleinto their application.
- A simple button can be created using
<button mat-button>Primary</button>in the app component to verify successful integration of Angular Material styling.
Conclusion and Next Steps
- The tutorial emphasizes learning step-by-step; understanding modules will come later as more complex topics are introduced.
Angular Material Installation and Overview
Compiling Angular Material
- The compilation process may take time, especially during the initial setup due to the number of packages being loaded. Subsequent compilations should be faster.
- Once compiled, the Angular development server will run on
localhost:4200, allowing users to view their application in a web browser.
Applying Styles and Themes
- Users can explore additional styling options by visiting
material.angular.io. For instance, selecting primary or secondary buttons demonstrates different color themes and animations.
- Successful installation of Angular Material is confirmed as the application displays an indigo and pink theme with buttons featuring a ripple effect, indicating that the button module is functioning correctly.
Next Steps in Learning Angular