Angular Material List

  • Usually used to display list in sidenav

material.module.ts (a new module added)

import { NgModule } from '@angular/core';
import { MatButtonModule, MatDividerModule } from '@angular/material';
import { MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonToggleModule} from '@angular/material/button-toggle';
import { MatIconModule} from '@angular/material/icon';
import { MatToolbarModule} from '@angular/material/toolbar';
import { MatSidenavModule} from '@angular/material/sidenav';
import { MatMenuModule} from '@angular/material/menu';
import { MatListModule } from '@angular/material/list';


const MaterialComponent = [
  MatButtonModule,
  MatButtonToggleModule,
  MatIconModule,
  MatBadgeModule,
  MatProgressSpinnerModule,
  MatToolbarModule,
  MatSidenavModule,
  MatMenuModule,
  MatListModule,
  MatDividerModule
];

@NgModule({
  imports: [
    MaterialComponent,
  ],
  exports: [
    MaterialComponent
  ]
})
export class MaterialModule { }

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 { MaterialModule } from './material/material.module';
import { FormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<mat-list>
  <mat-list-item>
    <mat-icon mat-list-icon>home</mat-icon>
    <h3 matLine>Heading</h3>
    <p matLine>Line</p>
  </mat-list-item>
  <mat-divider></mat-divider>
  <mat-list-item>
    <mat-icon mat-list-icon>folder</mat-icon>
    <h3 matLine>Heading2</h3>
    <p matLine>Line2</p>
  </mat-list-item>
</mat-list>
<hr>
<mat-list>
  <mat-list-item>Item 1</mat-list-item>
  <mat-list-item>Item 2</mat-list-item>
  <mat-list-item>Item 3</mat-list-item>
</mat-list>
<mat-list dense>
  <mat-list-item>Item 1</mat-list-item>
  <mat-list-item>Item 2</mat-list-item>
  <mat-list-item>Item 3</mat-list-item>
</mat-list>
<mat-nav-list>
  <a mat-list-item href="#">Home</a>
  <a mat-list-item href="#">About</a>
  <a mat-list-item href="#">Services</a>
</mat-nav-list>

Output :

Leave a Comment