/angular-material-workshop

Angular Material Master Class

Primary LanguageTypeScriptMIT LicenseMIT

Angular Material Master Class

This branch contains the initial start (i.e. step-0) of the Angular Material Master Class.

Branches

There are two (2) branches in this repository that you may find useful:

  • master - Starting point for classroom students.
  • classroom - Final solution for the classroom work:

The classroom branch contains commits to the classroom labs and the final Jumpstart application. This application will be constructed using:

  • Typescript
  • Angular
  • Angular Material
  • Angular CDK
  • Angular Flex-Layout

Jumpstart Application

JumpStart

Above is a snapshot of the AMMC Jumpstart application with a Master-Detail layout; showing a list of users (left) and a user detail view (right).

This Jumpstart application demonstrates how:

  • Flex-Layout directives (fxLayout, fxFlex, fxLayoutGap) can create advanced layouts.
  • Angular Material components can be used to create a good-looking production-ready app.
  • Angular Material CDK CDK services and classes that can be used to create a good-looking production-ready app.

 


Wirefame

The illustration below shows how we planned the layout and identified the primary components that will be used in the Starter app:

plancomponents2

 

 

Prerequisites

This tutorial assumes that you have already cloned the repository and executed the following commands:

  • npm i
  • ng serve

You should see the following in your browser:

JumpStart Application


 

Classroom Quick Jumps