ipsos-components/src/demo-app/list/list-demo.html

Material Design components for Angular

<h1>mat-list demo</h1>

<button mat-raised-button (click)="thirdLine=!thirdLine" class="demo-button">Show third line</button>

<div class="demo">
  <div>
    <h2>Normal lists</h2>

    <mat-list>
      <h3 mat-subheader>Items</h3>
      <mat-list-item *ngFor="let item of items">
        {{item}}
      </mat-list-item>
    </mat-list>

    <mat-list>
      <mat-list-item *ngFor="let contact of contacts">
        <h3 mat-line>{{contact.name}}</h3>
        <p mat-line *ngIf="thirdLine">extra line</p>
        <p mat-line class="demo-secondary-text">{{contact.headline}}</p>
      </mat-list-item>
    </mat-list>

    <mat-list>
      <h3 mat-subheader>Today</h3>
      <mat-list-item *ngFor="let message of messages">
        <img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
        <h4 mat-line>{{message.from}}</h4>
        <p mat-line>
          <span>{{message.subject}} -- </span>
          <span class="demo-secondary-text">{{message.message}}</span>
        </p>
      </mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item *ngFor="let message of messages">
        <h4 mat-line>{{message.from}}</h4>
        <p mat-line> {{message.subject}} </p>
        <p mat-line class="demo-secondary-text">{{message.message}} </p>
      </mat-list-item>
    </mat-list>
  </div>

  <div>
    <h2>Dense lists</h2>
    <mat-list dense>
      <h3 mat-subheader>Items</h3>
      <mat-list-item *ngFor="let item of items">
        {{item}}
      </mat-list-item>
    </mat-list>

    <mat-list dense>
      <mat-list-item *ngFor="let contact of contacts">
        <h3 mat-line>{{contact.name}}</h3>
        <p mat-line class="demo-secondary-text">{{contact.headline}}</p>
      </mat-list-item>
    </mat-list>

    <mat-list dense>
      <h3 mat-subheader>Today</h3>
      <mat-list-item *ngFor="let message of messages">
        <img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
        <h4 mat-line>{{message.from}}</h4>
        <p mat-line> {{message.subject}} </p>
        <p mat-line class="demo-secondary-text">{{message.message}} </p>
      </mat-list-item>
    </mat-list>
  </div>
  <div>
    <h2>Nav lists</h2>
    <mat-nav-list>
      <a mat-list-item *ngFor="let link of links" href="http://www.google.com">
        {{ link.name }}
      </a>
    </mat-nav-list>
    <div *ngIf="infoClicked">
      More info!
    </div>
    <mat-nav-list>
      <mat-list-item *ngFor="let link of links">
        <a mat-line href="http://www.google.com">{{ link.name }}</a>
        <button mat-icon-button (click)="infoClicked=!infoClicked">
          <mat-icon>info</mat-icon>
        </button>
      </mat-list-item>
    </mat-nav-list>
    <mat-nav-list>
      <a mat-list-item *ngFor="let link of links" href="http://www.google.com">
        <mat-icon mat-list-icon>folder</mat-icon>
        <span mat-line>{{ link.name }}</span>
        <span mat-line class="demo-secondary-text"> Description </span>
      </a>
    </mat-nav-list>
    <mat-nav-list dense>
      <mat-list-item *ngFor="let link of links">
        <a mat-line href="http://www.google.com">{{ link.name }}</a>
        <button mat-icon-button (click)="infoClicked=!infoClicked">
          <mat-icon class="material-icons">info</mat-icon>
        </button>
      </mat-list-item>
    </mat-nav-list>
  </div>

  <div>
    <h2>Selection list</h2>

    <mat-selection-list #groceries [ngModel]="selectedOptions"
                        (ngModelChange)="onSelectedOptionsChange($event)"
                        (change)="changeEventCount = changeEventCount + 1">
      <h3 mat-subheader>Groceries</h3>

      <mat-list-option value="bananas">Bananas</mat-list-option>
      <mat-list-option selected value="oranges">Oranges</mat-list-option>
      <mat-list-option value="apples">Apples</mat-list-option>
      <mat-list-option value="strawberries">Strawberries</mat-list-option>
    </mat-selection-list>

    <p>Selected: {{selectedOptions | json}}</p>
    <p>Change Event Count {{changeEventCount}}</p>
    <p>Model Change Event Count {{modelChangeEventCount}}</p>

    <p>
      <button mat-raised-button (click)="groceries.selectAll()">Select all</button>
      <button mat-raised-button (click)="groceries.deselectAll()">Deselect all</button>
    </p>
  </div>
</div>