Overview

Angular Landing is a material design landing page built with Angular and Angular CLI. It implements Angular Material Design package with minimalist design. Each page section is composed of its own html, scss and ts files, organized in its own directory and So it's easy to customize and reuse.

IMPORTANT: It's not An regular HTML landing page. It's built with Angular

Features

• Angular Material
• Full responsive
• Multiple Home versions
• Alternative sections

Getting Started

Make sure you have Nodejs, yarn and angular-cli installed on your computer.

Download node https://nodejs.org/en/download

Angular CLI Doc: https://cli.angular.io

Serve and build

Use terminal and navigate to project root.

Then run yarn

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200. The app will automatically reload if you change any of the source files.

Code Scaffolding

Run ng generate component componentName to generate a new component. You can also use ng generate directive/pipe/service/class/module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Navigation

Each menu item uses scrollTo directive. It accepts target page sections id. e.g. scrollTo="portfolio-section"

routerLink can also be used instead of scrollTo

Theming Guide

First create color palettes for

• primary
• accent and
• warn

Create palette here http://mcg.mbitson.com. Copy sass code for angular 2+, create file like src/assets/styles/themes/indigo.scss with the generated code. And include that file in .angular-cli.json

For more about theming, visit these links

• Angular material theming doc.

Common CSS Classes

Dependencies

Angular material

Doc: https://material.angular.io

Flex layout

Doc: https://github.com/angular/flex-layout

ng2-validation

Doc: https://github.com/yuyang041060120/ng2-validation

@ngu/carousel

Doc: https://github.com/sheikalthaf/ngu-carousel