CodingWithTashi

 <mat-form-field class="example-chip-list">
      <mat-chip-list #chipList aria-label="Fruit selection">
        <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
                 [removable]="removable" (removed)="remove(fruit)">
          {{fruit.name}}
          <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
        </mat-chip>
        <input placeholder="New fruit..."
               [matChipInputFor]="chipList"
               [matChipInputAddOnBlur]="addOnBlur"

CodingWithTashi

  <div>
      <mat-spinner></mat-spinner>
    </div>

CodingWithTashi

<div style="width: 500px;">
      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    </div>

CodingWithTashi

    <p>Click here to check for bottom sheet example</p>
<button mat-raised-button (click)="openBottomSheet()">Open file</button> 

CodingWithTashi

<mat-nav-list>
    <a href="https://keep.google.com/" mat-list-item (click)="openLink($event)">
      <span mat-line>Google Keep</span>
      <span mat-line>Add to a note</span>
    </a>
  
    <a href="https://docs.google.com/" mat-list-item (click)="openLink($event)">
      <span mat-line>Google Docs</span>
      <span mat-line>Embed in a document</span>
    </a>

CodingWithTashi

  Form Filling
    <ol>
      <li>
        <mat-form-field>
          <mat-label>Enter your name?</mat-label>
          <input matInput [(ngModel)]="name">
        </mat-form-field>
      </li>
      <li>
        <button mat-raised-button (click)="openDialog()">Enter age in dialog</button>

CodingWithTashi

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <p>How old are you</p>
  <mat-form-field>
    <mat-label>Your age</mat-label>
    <input matInput [(ngModel)]="data.age">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>

CodingWithTashi

    <mat-form-field>
      <mat-label>Message</mat-label>
      <input matInput value="Deleted File" #message>
    </mat-form-field>
    
    <mat-form-field>
      <mat-label>Action</mat-label>
      <input matInput value="Undo" #action>
    </mat-form-field>
    

CodingWithTashi

<button mat-raised-button
      matTooltip="This is button tooltip"
      aria-label="Button that displays a tooltip when focused or hovered over">
     Action
    </button>
    <a style="margin-left: 10px;" matTooltip="Info about the test" href="#">Test Link</a>

CodingWithTashi

<div>
      <mat-paginator [length]="100"
      [pageSize]="10"
      [pageSizeOptions]="[5, 10, 25, 100]">
      </mat-paginator>  
    </div>