Home >Web Front-end >JS Tutorial >Angular study notes: examples of integrating third-party UI frameworks and controls

Angular study notes: examples of integrating third-party UI frameworks and controls

亚连
亚连Original
2018-05-29 11:58:421822browse

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:

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 &#39;@angular/platform-browser/animations&#39;;
  imports:[
    BrowserAnimationsModule,
    MatInputModule,
    MatCardModule,
    MatButtonModule,
  ]

How to install Ag-grid

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

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 &#39;@angular/platform-browser&#39;;
import { BrowserAnimationsModule } from &#39;@angular/platform-browser/animations&#39;;
import { NgModule } from &#39;@angular/core&#39;;
import { FormsModule } from &#39;@angular/forms&#39;;
import { HttpClientModule } from &#39;@angular/common/http&#39;;
import { NgZorroAntdModule } from &#39;ng-zorro-antd&#39;;
import { AppComponent } from &#39;./app.component&#39;;
@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"
]

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn