Angular 2 Tutorial For Beginners to Professionals

Welcome to the Angular 2 Tutorial. We have created simple Angular 2 tutorial for beginners to professionals to learn the all the features of the Angular 2. This tutorial is for those who wants to learn Angular 2 from scratch.

What is Angular 2

The Angular 2 is the latest version of the AngularJS, which is a development platform for building mobile and desktop web applications. The Angular 2 now comes with every feature you need to build a complex and sophisticated web or mobile application. It comes with component, Directives, Forms, Pips, HTTP Services, Dependency Injection etc

The Angular 2 is a complete rewrite of AngularJS. It has some of the breaking changes like Typescript replacing Javascript, Built in Mobile Support, $scope are gone, components replacing the controllers, Change detection has become more efficient with zone.js etc.

Prerequisites for Angular 2 Tutorial

The Angular 2 tutorial require a working knowledge of Javascript, HTML & CSS. It also requires the concept of OOP. Prior knowledge of Angular 1 or AngularJs is not required.

We are going to use Typescript as our language. If you have knowledge of C# or Java, then you would find it very easy. Take a look at the Typescript Tutorial

Angular 2 Tutorial

Table of Content

1.Introduction to Angular 2

This Introduction to Angular 2 Tutorial gives you a glimpse of Angular 2. Angular 2 is a UI framework for building mobile and desktop web applications. It is built using Javascript. You can use it to build amazing client side applications using HTML, CSS, and Javascript.

Angular 2 incorporated many improvements & innovations into the product. These changes make it easy to learn and develop enterprise scale applications.

2. Angular2 Architecture Overview & Concepts

It is very important to know how the framework works before you start using it. In this article let us look at some of the important Angular2 building blocks & Architecture of Angular 2.

3.Installing and getting started with Angular 2

The Angular 1 was very easy to set up and get started. That is not the case with the Angular 2. We need to choose our editor, choose language and find a package manager to load angular 2 library and all other dependent libraries.

In this tutorial, we look at the editors and other libraries that we need and how to set up our development environment.

4. Create Your First Angular 2 Application

This step by step tutorial takes you through the process of creating an Angular 2 application using Angular 2 Command Line Interface (CLI). You can create your Angular 2 project just using a single command. Configuration & initialization of various libraries is taken care by the Angular 2 CLI

5.Bootstrapping Angular 2 Application

The previous tutorial uses Angular CLI to quickly generate the Angular 2 application. In this tutorial let us look at what’s happening behind all those boilerplate codes that are generated by Angular CLI and see how Angular 2 Application gets bootstrapped

6. Introduction to Angular2 Components

The Component is the main building block of an Angular 2 Application. A component contains the definition of the View and the data that defines how the View looks and behaves. In this Tutorial we are going to look at Angular 2 Components. We will look at the building blocks of the component and the important metadata properties of Components like selector, template, styleURL etc. We also show you how to create a simple component in Angular 2

7. Data Binding in Angular 2

Data Binding is a process where data is passed from controller to view and vice versa. The Data Binding is used to bind DOM Elements to component properties. Binding can be used display component class property values to the user, change element styles, respond to a user event etc. In this Angular 2 Tutorial, we will explore the data binding in detail

8. Adding Child Component in Angular 2

In this tutorial, we look to Extend the Angular 2 Application we built in Tutorial 3 (Create Angular 2 Application using Angular 2 CLI) by adding a child component to the existing component.

9. Angular 2 Directives

In this Introduction to Angular 2 Directive, we are going to look at the Angular Directives. We will look at three types of directives that angular supports like Component, Structural and Attribute Directives. We also look the few of the most commonly used Angular2 directives.

ngFor
The ngFor is an Angular 2 structural directive, which repeats a portion of HTML template once per each item from an iterable list (Collection). The ngFor is similar to ngRepeat in AngularJS
ngSwitch Directive
The ngSwitch is an Angular 2 structural directive, which allows us to Add/Remove DOM Element.It is similar to switch statement of C#. In this tutorial, we will look at the syntax of ngSwitch. We will show you how to use ngSwitch using an example code.
ngIf Directive
The ngIf is an Angular 2 Structural Directive, which allows us to Add/Remove DOM Element. It is similar to the ng-if directive of AngularJs. In this Tutorial let us look at the syntax of ngIf. We will show you how to use ngIf using an example code.
ngClass Directive
ngClass Directive is an Angular 2 Attribute Directive, which allows us to add or remove CSS classes to an HTML element. Using ngClass you can create dynamic styles in HTML pages
ngStyle Directive
The ngStyle directive allows you to modify the style of an HTML element using the expression. In this tutorial, we will look how to use ngStyle with few examples. Using ngStyle you can dynamically change the style of your HTML element. You also can bind these properties to components properties.

10. Angular 2 Pipes

Angular 2 pipes are the new way to Transform Data. They are similar to Filters in AngularJS. In this Tutorial we are going to look at what is pipes are & how to use them. We will see how to pass arguments to the pipe and how to chain pipes. We are also going to look at the few of the angular 2 built in pipes like currency pipe, date pipe, number pipe, percent pipe, decimal pipe, slice pipe.

11. Angular Custom Pipes

In this tutorial, we will look at how to create Angular 2 Custom Pipes. We looked at Angular 2 Pipes in our last tutorial. The Angular 2 comes with few built-in pipes like Date pipe, Currency pipe, and Number pipe etc. But these pipes might not be sufficient to our needs. That is where you need to build a Custom pipes in Angular 2

12. Angular 2 Forms

The data entry forms can be a very simple to very complex. The Forms contains large no of input fields, a variety of fields like Text Boxes, Dates, Numbers, Emails, Password, Check Boxes, Option boxes etc. These fields can Span multiple tabs or multiple pages. Forms may also contain complex validation logic interdependent on multiple fields.

The Angular 2 forms modules are designed to handle all of the above and lot more. The Angular 2 Forms now supports Model Driven approach to Forms development. The older way of Template based approach is also supported

Angular 2 Forms Fundamental & Concepts
In the Angular 2 Forms Tutorial, we look at the basic building blocks of the Angular 2 Forms. These Building Blocks are FormControl, FormGroup, & FormArray. The FormControl represents a single input element along with its validation state etc. FormGroup & FormArray make it easy to group FormControls in a meaning full way. Find out all these from the above tutorial
Template Driven Forms in Angular 2
The Time tested Template Driven Forms, which we used in Angular 1 has made its way into Angular 2. Most of the concepts you learned have stayed the same, but the underlying system has changed and has become more efficient. Learn How to build a Template Driven forms in this tutorial
Validation in Template Driven Forms
A Forms Model, which does not support validation is useless. The Template Driven Forms supports validation by binding directives to the Form elements. In this tutorial, learn how to add validation to the Angular Form. We are adding required & Minlength validators to a sample application.
Model Driven Forms in Angular 2
The Model Driven Forms are the new way to build Data entry Forms. Here we will be writing a lot of code while building our Forms model in component class. The Component class then powers our Form. The model driven Forms gives a lot of flexibility & power in the hands of the developer. In this tutorial, we will build a simple Angular 2 Form using Model Driven Approach from scratch.
Validations in Model Driven Forms
The Validation in model Driven Forms is added in the component class. In this tutorial, we will be adding required and minlength built in validators to Model Driven form, which we built in the previous tutorial

13. Angular 2 Dependency Injection

Angular 2 Services
In this Angular 2 Services tutorial, we will show you how to build a simple component that fetches list of products from an Angular 2 Service and display it in our template.
Our components need to access to data. You can write data access code in each component, but that is very inefficient. The Best way is to create a single reusable code and use it to retrieve data in every component that needs it. That is exactly where services come in.
Angular 2 Dependency Injection Framework
In this tutorial, we look at how to use Angular 2 Dependency Injection Framework. We will update the service, which we created in the previous tutorial (Angular 2 Services) to use the Dependency injection.
Angular 2 is designed from the ground up to support and leverage dependency injection
Angular 2 Providers
Angular 2 Providers allow you to define set of Dependencies. It provides the instance of dependencies to the injector when asked by the injector. We let angular know that, we have a dependency to be injected by registering the dependency with the Providers
Angular 2 Hierarchical Dependency Injection
In this tutorial, we will look at Angular 2 Injector, one of the parts of the Angular 2 Dependency Injection Framework. The Angular 2 creates a tree of injector & Providers which resembles the Component Tree. This is called hierarchical pattern.

14. Angular 2 HTTP Tutorial

In this Angular 2 HTTP tutorial, We learn how to use HTTP Module to query the Remote API source to get data into our Application. We also learn how to Subscribe to the Returned response using RxJs observables.

15. Angular Router

Routing and Navigation in Angular
In this Routing & Navigation in Angular Tutorial, we look at how navigation & Routing works in Angular using the Angular Router. We will see what routing is and the components of the Angular Router Module. We will show you how to setup and configure the router in the Angular application. Finally, we will create a sample application with four components and create menu navigation system using the Angular Router.
Location Strategies in Angular Router
In this Tutorial, we look at the Location Strategies (browser URL styles) supported by the Angular. Angular Supports Pathlocation strategy and HashLocation Strategy. We will look at what is client side routing and how it works. We take a look at how hash style & HTML5 routing works and pros & cons of each. Finally, we will learn how to build the Angular application using the PathLocationStrategy (HTML5 routing ) & HashLocationStrategy.(hash style Routing )
Passing Parameters to Route
In this tutorial, we look at how to pass parameters or data to the Route in Angular. We look at how to define the route, which accepts the parameter. We then learn how to pass the parameters to the route using the routerLink directive. Finally, we learn how to retrieve the parameters using the ActivatedRoute Service. The parameters can be retrieved by using the either by snapshot method or by subscribe method. We take a look at both of these methods.
Child Routes / Nested Routes
In this tutorial, we look at how to add a child or nested routes to an Angular route. Child Routes or Nested routes are a powerful new feature in the Angular router. Nested routes are routes within other routes. In this Tutorial, we will show you how to create a child route and display the child components. The Angular allows us to nest child routes under another child routes effectively creating a Tree of routes
Passing Optional (Query) Parameters to a route
In this tutorial, let us look at how to pass and access the Optional or query parameters in Angular. Query parameters allow you to pass optional parameters like page number to the component. In this tutorial, we look at how to pass the query parameters using the queryParams directive. We then look at how to retrieve the parameter in the component using the ActivatedRoute Service.

15. Create Angular 2 Application using SystemJS

In this Angular 2 Tutorial, we are going to build a small application from scratch using SystemJS module loader. The application displays “hello messages” in the browser. To do that, First, we create required config files, Use npm package manager to load Angular 2, Typescript, SystemJs, and other dependencies. Next we l build a root component and then we add the root component to root Angular module. Finally, we use Angular 2 bootstrapper to bootstrap our application.

16. Create Angular 2 Application using Webpack

The Previous chapter showed how to create the Angular 2 Application using Angular 2 CLI & SystemJS. In this tutorial, we are going to build a small application from scratch using Webpack as our module loader.

Angular 2 Resources

The Official Page