Winkelmaterial 7 - Liste

Das <mat-list>, eine Winkelrichtlinie, wird verwendet, um einen Container zum Tragen und Formatieren einer Reihe von Elementen zu erstellen.

In diesem Kapitel wird die Konfiguration vorgestellt, die zum Zeichnen eines Listensteuerelements mit Angular Material erforderlich ist.

Erstellen Sie eine Winkelanwendung

Führen Sie die folgenden Schritte aus, um die Angular-Anwendung zu aktualisieren, die wir in Angular 6 - Projekt-Setup- Kapitel erstellt haben.

Schritt	Beschreibung
1	Erstellen Sie ein Projekt mit dem Namen materialApp, wie im Kapitel Angular 6 - Projekteinrichtung erläutert .
2	Ändern app.module.ts , app.component.ts , app.component.css und app.component.html wie unten erläutert. Lassen Sie den Rest der Dateien unverändert.
3	Kompilieren Sie die Anwendung und führen Sie sie aus, um das Ergebnis der implementierten Logik zu überprüfen.

Es folgt der Inhalt des modifizierten Moduldeskriptors app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatListModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatListModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Es folgt der Inhalt der geänderten HTML-Hostdatei app.component.html.

<mat-list role = "list">
   <mat-list-item role = "listitem">One</mat-list-item>
   <mat-list-item role = "listitem">Two</mat-list-item>
   <mat-list-item role = "listitem">Three</mat-list-item>
</mat-list>

Ergebnis

Überprüfen Sie das Ergebnis.

Einzelheiten

• Als erstes haben wir eine Liste mit mat-list erstellt.
• Dann haben wir Inhalte mit mat-list-item hinzugefügt.