Angular utilise le cadre et les contrôles de l'interface utilisateur

Cette fois, je vais vous présenter l'utilisation par Angular des frameworks et des contrôles de l'interface utilisateur. Quelles sont les précautions à prendre pour l'utilisation par Angular des frameworks et des contrôles de l'interface utilisateur ? Ce qui suit est un cas pratique, jetons un coup d'œil.

étape 1 :

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

étape 2 :

npm install --save @angular/animations

étape 3 :

angular.cli

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

ou

style.css

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

étape 4 :

index.html

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

étape 5 :

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

Comment installer Ag-grid

Site officiel d'Ag-grid : https://www.ag-grid.com/

étape 1 :

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

étape 2 :

angular.cli

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

étape 3 :

app.module.ts

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

Comment installer NG-ZORRO

Site officiel de NG-ZORRO : https://ng.ant.design/version/0.7.x/docs/introduce/zh

étape 1 :

npm install ng-zorro-antd --save

étape 2 :

Remplacez directement le contenu de /src/app/app.module.ts par le code suivant

Remarque : dans le module racine, NgZorroAntdModule.forRoot() doit être utilisé dans le sous-module et NgZorroAntdModule

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 { }

étape 3 :

Modifier la liste des styles du .angular-cli.json fichier

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le nouvel attribut CSS display:box

Comment déterminer le glissement de l'utilisateur dans H5 Direction de l'événement tactile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!