Angular 2 [PART-1] – introduction

Download Employee Project

Intention for this series is lean all the main areas of angular 2 or 2 plus versions with a single project , learning theory without practical is too time taken ,take much effort . so here each of the section explain with code and related information’s .

Here I created a simple Employee Application , which will be cover all the sections , i wish you you can do your own application after complete this tutorials, please read and exercise each part one by one , because each section will be continuation for previous one

Why Angular 2

Angular 2 is a JavaScript framework , angular 2 communicate back end with web API so we can independently handle front end and back end , angular 2 support Type Scripts , TypeScript includes many aspects of object orientation such as inheritance and interfaces. angular 2 application made with number of components , we can reuse components we will discus in our next section .

About Example project

This tutorial is explain with a simple App call Employee App , application contain 3 pages Home page, Employee list population and Add new Employee , and all the areas are covered so that easily create your own project.
Project Cover

Modules

Components

Data binding

interpolation vs property binding

attribute Binding

Class binding

Style Binding

Two way bindin Angular ngFor directive (ngFor)

Angular ngFor trackBy

Angular pipes

Custom Pipeline

Angular component input properties

Angular component output properties

HTTP Server Request ( Get data from Database as Json Data )

Add Bootstrap

Routing

POST data to the back end

Home Page
Home page
Contain Just a this is home page Text display page

Employee List
Employee list have populate employee details , which is populated from json API . Filter Employee With gender functionality , format display name , price using default and custom pipes .

Click on any row of Employee list will be populate general and salary details of employee , which will be explain by using angular we can easily access data without back end hit .

Save form data is important in development , so here created a add employee form and explain how to create an angular form and how to send data to the back end without page reload .