Angular integrates three-party UI frameworks and controls in detail

This time I will bring you a detailed explanation of the use of Angular's integrated three-party UI framework and control. What are the precautions for Angular's integrated three-party UI framework and controls? The following is a practical case, let’s take a look.

step 1:

npm install --save @angular/material @angular/cdk

step 2:

npm install --save @angular/animations

step 3:

angular.cli

../node_modules/@angular/material/prebuilt-themes/indigo-pink.css

or

style.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

step 4:

index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" rel="stylesheet">

step 5:

  app.module.ts
  import {MatInputModule, MatCardModule, MatButtonModule} from "@angular/material";
  import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
  imports:[
    BrowserAnimationsModule,
    MatInputModule,
    MatCardModule,
    MatButtonModule,
  ]

How to install Ag-grid

Ag-grid official website: https://www.ag-grid.com/

step 1:

npm install --save ag-grid-angular ag-grid

step 2:

angular.cli

"../node_modules/ag-grid/dist/styles/ag-grid.css",
"../node_modules/ag-grid/dist/styles/ag-theme-fresh.css"

step 3:

app.module.ts

imports:[
  AgGridModule.withComponents([])
],
exports:[
  AgGridModule
]

How to install NG-ZORRO

NG-ZORRO official website: https://ng.ant.design/version/0.7.x/docs/introduce/zh

step 1:

npm install ng-zorro-antd --save

step 2:

Directly replace the contents of /src/app/app.module.ts with the following code

Note: NgZorroAntdModule.forRoot() needs to be used in the root module, and NgZorroAntdModule needs to be used in the sub-module

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgZorroAntdModule } from 'ng-zorro-antd';
import { AppComponent } from './app.component';
@NgModule({
 declarations: [
  AppComponent
 ],
 imports: [
  BrowserModule,
  FormsModule,
  HttpClientModule,
  BrowserAnimationsModule,
  NgZorroAntdModule.forRoot()
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

step 3:

Modify the styles list of the .angular-cli.json file

"styles": [
  "../node_modules/ng-zorro-antd/src/ng-zorro-antd.less"
]

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related topics on the php Chinese website article!

Recommended reading:

Detailed explanation of unit and E2E testing steps with Angular CLI

Vue document use case summary

Calling the Baidu map plug-in in Vue

The above is the detailed content of Angular integrates three-party UI frameworks and controls in detail. For more information, please follow other related articles on the PHP Chinese website!