This article mainly introduces Angular study notes and examples of integrating three-party UI frameworks and controls. It also introduces Material UI, Ag-grid and other frameworks in detail. It has certain reference value. Interested friends can refer to it.
This article introduces Angular study notes and examples of integrating three-party UI frameworks and controls, and shares them with everyone. The details are as follows:
step 1:
1 | npm install --save @angular/material @angular/cdk
|
Copy after login
step 2:
1 | npm install --save @angular/animations
|
Copy after login
step 3:
angular.cli
1 | ../node_modules/@angular/material/prebuilt-themes/indigo-pink.css
|
Copy after login
or
style.css
1 | @import "~@angular/material/prebuilt-themes/indigo-pink.css" ;
|
Copy after login
step 4:
index.html
1 | <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel= "external nofollow" rel= "stylesheet" >
|
Copy after login
step 5:
1 2 3 4 5 6 7 8 9 | app.module.ts
import {MatInputModule, MatCardModule, MatButtonModule} from "@angular/material" ;
import {BrowserAnimationsModule} from & #39;@angular/platform-browser/animations';
imports:[
BrowserAnimationsModule,
MatInputModule,
MatCardModule,
MatButtonModule,
]
|
Copy after login
How to install Ag-grid
step 1:
1 | npm install --save ag-grid-angular ag-grid
|
Copy after login
step 2 :
angular.cli
1 2 | "../node_modules/ag-grid/dist/styles/ag-grid.css" ,
"../node_modules/ag-grid/dist/styles/ag-theme-fresh.css"
|
Copy after login
step 3:
app.module.ts
1 2 3 4 5 6 | imports:[
AgGridModule.withComponents([])
],
exports:[
AgGridModule
]
|
Copy after login
How to install NG-ZORRO
step 1:
1 | npm install ng-zorro-antd --save
|
Copy after login
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import { BrowserModule } from & #39;@angular/platform-browser';
import { BrowserAnimationsModule } from & #39;@angular/platform-browser/animations';
import { NgModule } from & #39;@angular/core';
import { FormsModule } from & #39;@angular/forms';
import { HttpClientModule } from & #39;@angular/common/http';
import { NgZorroAntdModule } from & #39;ng-zorro-antd';
import { AppComponent } from & #39;./app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
NgZorroAntdModule.forRoot()
],
bootstrap: [AppComponent]
})
export class AppModule { }
|
Copy after login
step 3:
Modify the styles list of the .angular-cli.json file
1 2 3 | "styles" : [
"../node_modules/ng-zorro-antd/src/ng-zorro-antd.less"
]
|
Copy after login
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Detailed explanation of Vue custom dynamic component instance
##Detailed explanation of VUE's extension of ElTableColumn in element-ui
Example of how to return to the home page from the sharing page of WeChat Mini Program
The above is the detailed content of Angular study notes: examples of integrating third-party UI frameworks and controls. For more information, please follow other related articles on the PHP Chinese website!