Angular Material Starter Kit

1 week ago I started to work in a new project. For the frontend part I decided to use Angular 2 / 4 and Google material design, but I didn’t want to build the whole application and its skeleton from scratch. So I decided to implement an angular-material-starter-kit I can use every time I start a new project without repeating same issues. The goal is to have at the end a solid and responsive design which works with the angular material library. Then I thought I’m not the only developer in this world who needs something like that and shared this project with you.

Also for beginners this project can be very helpful to see how an angular 2 / 4 application can be developed.

Screenshots

Dark theme: Home

Light theme: Player and Comments

Blue theme: Search component

Features

1. Responsive design
2. Multiple themes and theming support
3. Header and sticky footer support
4. Angular lazy loaded modules
5. Side navigation
6. Swiper touch slider support
7. Youtube API: Search and watch youtube videos
8. Angular Flex-Layout

Video

Live Demo

Angular Material Starter

Installation

Check out the source code from GitHub:

g-sari/angular-material-starter-kit

If you don’t have already installed Node.js and angular-cli, follow following instructions.

Install Node.js for your operating system from the following link:

Node.js

To check if Node.js is installed successfull and open a terminal and type:

npm -version

You should see a version number like 3.10.10.

To install angular-cli, execute the following command in your terminal:

npm install -g @angular/cli

To check if angular-cli is installed successfully, just type after the installation

ng --version

Install required dependencies for the project

Open a terminal and navigate to the project root folder and type

npm install

How to run the application

To start the application open a terminal navigate to the project root folder and type

ng serve

The application should now run on http://localhost:4200

API Documentation

App Module

Core Module

Home Module

Layout Module

Search Module

For more documentation take a look into the project’s documentation folder.