Home

Here are workshop snippets that you can copy to save time.

Material Module

import  {
  MatButtonModule,
  MatCardModule,
  MatCheckboxModule,
  MatFormFieldModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSnackBarModule,
  MatTableModule,
  MatToolbarModule,
  MatButtonToggleModule
}  from  '@angular/material';

App Component

<mat-toolbar color="primary" class="mat-elevation-z4">
  <span>
    <button mat-mini-fab>
      <mat-icon>menu</mat-icon>
    </button>
    <span class="logo">
      <img src="assets/logo.png" alt="Logo">
    </span>
    <span class="title">
      <!-- TITLE -->
    </span>
  </span>
  <span class="spacer"></span>
  <button class="login" mat-mini-fab>
    <mat-icon>person</mat-icon>
  </button>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #sidenav mode="side" opened class="app-sidenav">
    <nav>
      <a mat-button class="nav-link">
        <mat-icon>
        <!-- LINK ICON -->
        </mat-icon>
        <!-- LINK LABEL -->
      </a>
    </nav>
  </mat-sidenav>

  <div class="app-content">
    <router-outlet></router-outlet>
  </div>
</mat-sidenav-container>

Projects Component

<div class="container">
  <!-- PROJECTS LIST -->
  <div class="col-50">
    <mat-card>
      <mat-card-header>
        <mat-card-title>
          <h1>Projects</h1>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <mat-list>
          <mat-list-item>
            <h3 mat-line>
              <!-- PROJECT DETAILS -->
            </h3>
            <p mat-line>
              <!-- PROJECT DETAILS -->
            </p>
            <button mat-icon-button>
              <mat-icon>close</mat-icon>
            </button>
          </mat-list-item>
        </mat-list>
      </mat-card-content>
    </mat-card>
  </div>
  <!-- PROJECT DETAILS -->
  <div class="col-50">
    <mat-card>
      <mat-card-header>
        <mat-card-title>
          <h1>
            <!-- PROJECT TITLE HERE -->
          </h1>
        </mat-card-title>
      </mat-card-header>
      <form>
        <mat-card-content>
          <!-- PROJECT FORM HERE -->
        </mat-card-content>
        <mat-card-actions>
          <button type="submit" mat-button color="primary">Save</button>
          <button type="button" mat-button>Cancel</button>
        </mat-card-actions>
      </form>
    </mat-card>
  </div>
</div>

projects = [
  {
    id: '1',
    title: 'Project One',
    details: 'This is a sample project',
    percentComplete: 20,
    approved: false,
  },
  {
    id: '2',
    title: 'Project Two',
    details: 'This is a sample project',
    percentComplete: 40,
    approved: false,
  },
  {
    id: '3',
    title: 'Project Three',
    details: 'This is a sample project',
    percentComplete: 100,
    approved: true,
  }
];

Login Component

<div class="container">
  <div class="card-wrapper">
    <mat-card class="mat-elevation-z1">
      <mat-card-header>
        <mat-card-title>
          <h2>Login</h2>
        </mat-card-title>
      </mat-card-header>
      <form>
        <mat-card-content>
          <mat-form-field>
            <input matInput placeholder="Email" type="text" name="email">
          </mat-form-field>
          <mat-form-field>
            <input matInput placeholder="Password" type="password" name="password">
          </mat-form-field>
        </mat-card-content>
        <mat-card-actions>
          <button type="submit" mat-raised-button color="primary">Login</button>
        </mat-card-actions>
      </form>
    </mat-card>
  </div>
</div>
<div class="background"></div>

filters = [
  'ig-xpro2',
  'ig-willow',
  'ig-walden',
  'ig-valencia',
  'ig-toaster',
  'ig-sutro',
  'ig-sierra',
  'ig-rise',
  'ig-nashville',
  'ig-mayfair',
  'ig-lofi',
  'ig-kelvin',
  'ig-inkwell',
  'ig-hudson',
  'ig-hefe',
  'ig-earlybird',
  'ig-brannan',
  'ig-amaro',
  'ig-1977'
];

chosenFilter = this.filters[Math.floor(Math.random() * this.filters.length)];

Customers Component

<div class="list-container">
  <h1 class="header">Current Customers</h1>

  <table mat-table class="full-width-table mat-elevation-z1" [dataSource]="customers" aria-label="Customers">

    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef>Id</th>
      <td mat-cell *matCellDef="let customer">{{customer.id}}</td>
    </ng-container>

    <ng-container matColumnDef="lastName">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let customer">{{customer.firstName}} {{customer.lastName}}</td>
    </ng-container>

    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef>Email</th>
      <td mat-cell *matCellDef="let customer">{{customer.email}}</td>
    </ng-container>

    <ng-container matColumnDef="phone">
      <th mat-header-cell *matHeaderCellDef>Phone</th>
      <td mat-cell *matCellDef="let customer">{{customer.phone}}</td>
    </ng-container>

    <ng-container matColumnDef="title">
      <th mat-header-cell *matHeaderCellDef>Title</th>
      <td mat-cell *matCellDef="let customer">{{customer.title}}</td>
    </ng-container>

    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef>Status</th>
      <td mat-cell *matCellDef="let customer">{{customer.status | status | titlecase}}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr (click)="selectCustomer(row)" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

// Columns displayed in the table. Columns IDs can be added, removed, or reordered.
displayedColumns = ['lastName', 'email', 'phone', 'title', 'status'];

Customer Component

<div class="container">
  <div class="col-50">
    <!-- CUSTOMER DETAILS -->
  </div>

  <div class="col-50">
    <router-outlet></router-outlet>
  </div>
</div>

Customer Details Component

<mat-card class="details-container" *ngIf="currentCustomer">
  <mat-card-header>
    <mat-card-title>
      <h1><!-- CUSTOMER NAME --></h1>
    </mat-card-title>
    <mat-button-toggle-group>
      <mat-button-toggle>
        Projects
      </mat-button-toggle>
      <mat-button-toggle>
        Contact
      </mat-button-toggle>
    </mat-button-toggle-group>    
  </mat-card-header>
  <form>
    <mat-card-content>
      <mat-form-field>
        <label for="firstName">First Name</label>
        <input matInput id="firstName" name="firstName">
      </mat-form-field>
      <mat-form-field>
        <label for="lastName">Last Name</label>
        <input matInput id="lastName" name="lastName">
      </mat-form-field>
      <mat-form-field>
        <label for="email">Email</label>
        <input type="email" matInput id="email" name="email">
      </mat-form-field>
      <mat-form-field>
        <label for="phone">Phone</label>
        <input matInput id="phone" name="phone">
      </mat-form-field>
      <mat-form-field>
        <label for="title">Job Title</label>
        <input matInput id="title" name="title">
      </mat-form-field>
      <mat-form-field>
        <mat-select placeholder="Status" id="status" name="status">
          <mat-option>
            <!-- STATUS NAME -->
          </mat-option>
        </mat-select>
      </mat-form-field>
    </mat-card-content>
    <mat-card-actions>
      <button type="submit" mat-button color="primary">Save</button>
      <button type="button" mat-button>Cancel</button>
    </mat-card-actions>
  </form>
</mat-card>

Customer Contact Component

<mat-card>
  <mat-card-header>
    <mat-card-title>
      <h1>Contact</h1>
    </mat-card-title>
  </mat-card-header>
  <form [formGroup]="form">
    <mat-card-content>
      <mat-form-field>
        <label for="subject">Subject</label>
        <input matInput id="subject" name="subject">
      </mat-form-field>
      <mat-form-field>
        <label for="message">Message</label>
        <textarea matInput id="message" name="message"></textarea>
      </mat-form-field>
    </mat-card-content>
    <mat-card-actions>
      <button type="submit" mat-button color="primary">Send</button>
      <button type="button" mat-button>Cancel</button>
    </mat-card-actions>
  </form>
</mat-card>

Customer Projects Component

<mat-card>
  <mat-card-header>
    <mat-card-title>
      <h1>Projects</h1>
    </mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <mat-list>
      <mat-list-item>
        <h3 mat-line><!-- PROJECT TITLE --></h3>
        <p mat-line>
          <!-- PROJECT DETAILS -->
        </p>
      </mat-list-item>
    </mat-list>

    <div>No projects found for user.</div>
  </mat-card-content>
</mat-card>

Customer Status Component

<div class="grid-container">
  <h1 class="header">Customer Status Report</h1>
  <mat-grid-list cols="4" rowHeight="225">
    <mat-grid-tile colspan="1" rowspan="1">
      <!-- GROUP STATUS -->
    </mat-grid-tile>
  </mat-grid-list>
</div>

groupCustomers(customers) {
  const grouped = this.groupBy(customers, 'status');
   return Object.keys(grouped)
    .map(key => ({ status: key, count: grouped[key] }));
}

groupBy(collection, property) {
  return collection.reduce((acc, curr) => {
    const key = curr[property]
    const existingEntry = acc[key];
    return (existingEntry) ?
      { ...acc, [key]: existingEntry + 1 } : // Increment it thereafter
      { ...acc, [key]: 1 }; // Set it the first time
  }, {});
}

Customer Group Status Component

<mat-card class="dashboard-card">
  <mat-card-header>
    <mat-card-title>
      <h1><!-- GROUP COUNT --></h1>
    </mat-card-title>
  </mat-card-header>
  <mat-card-content class="dashboard-card-content">
    <h2><!-- GROUP STATUS --></h2>
  </mat-card-content>
</mat-card>

Project Details Snippet

<mat-form-field class="full-width">
   <input matInput placeholder="Title" [(ngModel)]="selectedProject.title" type="text" name="title">
</mat-form-field>