angular material - How to use List dense layout mode

app.component.html

<h2 style="padding-top:25px; padding-bottom:16px;">
  Angular Material - How to use List dense layout mode
</h2>

<h3>List dense layout mode</h3>
<mat-list dense>
  <mat-list-item>ASP.NET</mat-list-item>
  <mat-list-item>C#</mat-list-item>
  <mat-list-item>Swift</mat-list-item>
  <mat-list-item>Bash</mat-list-item>
  <mat-list-item>Shell</mat-list-item>
</mat-list>

<h3 style="margin-top:35px;">
  List regular layout mode
</h3>
<mat-list>
  <mat-list-item>SQL</mat-list-item>
  <mat-list-item>Kotlin</mat-list-item>
  <mat-list-item>Java</mat-list-item>
  <mat-list-item>PHP</mat-list-item>
  <mat-list-item>GO</mat-list-item>
</mat-list>

app.module.ts [import]

import { MatListModule } from '@angular/material/list'

More Angular tutorials

• angular material - How to use Accordion
• angular material - How to use Expansion Panel
• angular material - Open Accordion multiple panels at once
• angular material - Action bar inside an Expansion Panel
• angular material - Expansion Panel opened & closed event
• angular material - How to use Accordion flat display mode
• angular material - Open & close Expansion Panel on button click
• angular material - Expansion Panel afterExpand & afterCollapse event
• angular material - How to initially expand Expansion Panel
• angular material - Expansion Panel header expanded background color
• angular material - Accordion expanded panels header background color
• angular material - How to use Navigation List
• angular material - Navigation list with button and icon
• angular material - How to use Action List
• angular material - Action list with button and icon