Angular uses UI framework and controls

This time I will bring you Angular's use of UI frameworks and controls. What are the precautions for Angular's use of UI frameworks and controls? Here are practical cases, 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:

How to use the new attribute display:box of css

How to determine user sliding in H5 touch event direction

The above is the detailed content of Angular uses UI framework and controls. For more information, please follow other related articles on the PHP Chinese website!