Angular Material 2 Start

Above is a snapshot of the Starter-App with a Master-Detail layout: showing a list of users (left) and a user detail view (right).

This starter app 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.
• Theming can be configured and controlled with Angular Material.

This sample application is purposed as both a learning tool and a skeleton application for a typical Angular Material app, comprised of a side navigation area and a content area. You can use it to quickly bootstrap your angular webapp projects and dev environment for these projects.

Wirefame

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

Prerequisites

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

• npm install
• ng serve

Tutorial Layout

You will notice a few files/directories within this tutorial:

1. src/app - This is where all of your application files will be created and edited.
2. src/assets - This folder contains some tutorial-provided images and icons which are used by the application.

These folders and files will be used to guide you through the development process. By following these tutorial steps, you will be very quickly introduced to the powerful features of Angular Material.

We encourage you to walk through each step yourself and build the application from the ground up. However, if you get stuck or want to start from a clean slate, each step has an associated Git tag that you can checkout to reset your code to match the start of the associated step in the tutorial.

If you have not completed a tutorial step and wish to jump to the next step, then run the following command to open a terminal menu. This menu allows you to easily switch between the tutorial steps.

• npm run workshop (Only works if material2-start has been downloaded using Git)

Note: In some of the Steps in this README, we have abbreviated some of the HTML or JavaScript in order to show what is being added or changed, so you may not be able copy & paste every example into your code. If you wish to start fresh, use the Git tags as described above.

Quick Jump

• Initial Setup
• Step 1
• Step 2
• Step 3
• Step 4
• Step 5
• Step 6
• Step 7
• Step 8
• Step 9
• Step 10

Summary

With only ten (10) tutorial steps and a few minutes of work, we have quickly created a functional Angular Material application that is beautiful, responsive, theme'ed, accessible, component-based, and easily maintained.