Detailed explanation of the steps to use third-party UI frameworks and controls in Angular

This time I will bring you a detailed explanation of the usage steps of third-party UIframework and controls in Angular, and notes## for the use of third-party UI frameworks and controls in Angular. #What are they? Here are actual cases. Let’s take a look.

Install Material UI method:

Material official website:

https://material.angular.io

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:

Replace /src/app/app.module directly with the following code Contents of .ts

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 .angular- Styles list of 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 articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps to call Baidu map in Vue

How to use the jointjs attribute in Vue

The above is the detailed content of Detailed explanation of the steps to use third-party UI frameworks and controls in Angular. For more information, please follow other related articles on the PHP Chinese website!