A brief discussion on how to introduce third-party UI library (Angular Material) into Angular projects

This article will introduce to you how to introduce a third-party UI library (Angular Material) into the Angular project. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Environment:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: VSCode

1. Selection of third-party UI libraries

Angular development, unless you only have one or two simple pages, introducing a third-party UI library is essential. As for which library to use, you need to consider many aspects. [Related tutorial recommendations: "angular tutorial"]

For example:

• Popularity

• Version update status (whether anuglar updates can be followed up, whether bugs are fixed in time)

• UI style, whether it is suitable for the project

• Ease of getting started

• Completeness of the documentation

There are many class libraries available for Angular on the market, which can be selected according to the project and enterprise conditions. Briefly list the optional UI libraries.

• Angular Material: angular official UI library. https://material.angular.io/

• clarity: A relatively popular foreign framework, https://clarity.design/.

• NG-ZORRO: Angular version of Alibaba Ant Design. https://ng.ant.design/docs/introduce/en

• Element Angular: The very popular Vue-based Element in China also has an Angular version. https://element-angular.faas.ele.me/

• Kendo UI. Many are very powerful, but they require a fee. https://www.telerik.com/kendo-angular-ui

2. Angular Material

##2.1 . Advantages and disadvantages

2.1.1. Advantages

Official UI component
• The most standard Material implementation
• Follow the update progress of Angular core components
• Official support for simultaneous upgrades with Angular

2.1.2. Disadvantages

There are not as many components as other frameworks, but they are basically enough.
• The style is not particularly similar to domestic frameworks

2.2. Introduction to the project

1. Execute the following command in the root directory:

ng add @angular/material

2. Import to the module to which the page belongs, or to app.module.ts.

// import MatSliderModule
import { MatSliderModule } from '@angular/material/slider';

…
@NgModule ({....
  imports: [...,
  MatSliderModule,
…]
})

3. Summary

• Third-party components have their own advantages and disadvantages

• According to the company, According to the needs of the project, choose

• Angular Material upgrade is easier and officially supported.

For more programming-related knowledge, please visit:

Programming Video! !

The above is the detailed content of A brief discussion on how to introduce third-party UI library (Angular Material) into Angular projects. For more information, please follow other related articles on the PHP Chinese website!