Angular JS and Angular 4/5/6

  • Batch Timings :
  • Starting Date :

Course Overview

Angular 5 is a new development platform for building mobile and desktop web applications. Angular works on Typescript and not JavaScript.  Work on live projects and applications in Angular.

Angular 6 is an advanced client-side framework based on the MVC pattern that allows developers to extend the HTML vocabulary and make the written code much more expressive and readable.


  • Resume & Interviews Preparation Support
  • Hands on Experience on One Live Project.
  • 100 % Placement Assistance
  • Resume Preparation
  • Interview Preparation
  • Multiple Flexible Batches

At the end of Angular 6 Training Course, Participants will be able to:

  • Make real time projects in Angular.
  • Learn how to build production-ready Angular 6  applications through a number of hands-on application.
  • Use Modules and Dependency injection.
  • Create Custom filters, Custom Directive and Isolate scopes in Directive.
  • Learn how to communicate with servers and make your project functional.

Course Duration

  • Weekends:  (6-8 Weekends)

Prerequisites :

  • Knowledge of HTML and Javascript is required.

Who Should Attend?

  • This course is recommended for Anyone who wants to become a Full Stack Web Developers
  • Front-End Developers who want to gain skills for backend programming concepts
  • Backend Developers who want to gain Skills for Front-End programming concepts


1.1 Getting Started

  • Introduction
  • What is Angular 2 and How it Works?
  • How does Angular get started?
  • First Angular App
  • Angular 5 v/s 4 v/s 2 v/s AngularJS

1.2 Typescript

  • Introduction
  • Working with tsc.
  • Basic Data Types & Variables
  • Using Types
  • Type Assertion
  • Operators & their types
  • Decision making constructs
  • Loops
  • Constructor Method
  • Inheritance of Classes
  • Type Assertion
  • Typescript Object
  • Working with Class and Abstract Class
  • Working with Interfaces
  • Working with Function

1.3 Installation and Configuration

  • Installing Angular JS
  • Configuration of Angular JS
  • Creating an Angular 2 project using CLI
  • Installing Git and Node
  • Setup for local environment

1.4 Architecture

  • Architecture of angularjs2
  • Component
  • Modules
  • Services
  • Dependency Injection
  • Directive
    • Attribute Directive
    • Structural Directive

1.5 Nodejs

  • What is node js
  • How to setup up NodeJS.
  • Working with NPM packages

1.6 Components

  • What are components?
  • Understanding Components life cycle hooks
  • Creating and using components
  • Dynamic components using ngComponentOutlet

1.7 Communicating Between Components

  • Passing Data into a Child Component
  • Passing Data out of a Child Component

1.8 Directives

  • What are directives?
  • Directive types
  • About Directive Scope
  • Creating Directives
  • Structural directives (ngIF, ngFor, ngSwitch)
  • Style and Class Directives ( ngClass, ngStyle)

1.9 Databinding

  • One-way databinding and Two-way databinding.
  • Property binding and Interpolation
  • Event binding
  • Attribute binding
  • Class binding
  • Style binding
  • Ng-Model
  • Use of @Input and @Output

1.10 Pipes

  • Why pipes are useful?
  • Parameterizing pipes
  • Custom pipes
  • Pure and Impure pipes
  • Async pipes

1.11 Template Driven Forms

  • Introduction
  • Create the component that controls the form
  • Create a template with the initial form layout
  • Bind data properties to each form input control with the ngModel two-way data binding syntax
  • Add the name attribute to each form input control
  • Add custom CSS to provide visual feedback
  • Show and hide validation error messages
  • Handle form submission with ngSubmit
  • Disable the form’s submit button until the form is valid
  • Resetting the form
  • Form with @ViewChild

1.12 Reactive Forms

  • Introduction
  • More Form Controls
  • Form Control Properties
  • setValue and patchValue
  • Validating Form Elements
  • Submitting and Resetting forms
  • Observing and Reacting to Form Changes
  • Using FormBuilder

1.13 Communicating with the Server Using HTTP, Observables, and Rx

  • Moving Data Storage to the Server
  • Listening to Resolved Data Changes
  • Using Querystring Parameters
  • Using POST and PUT
  • Using DELETE
  • Integrating Authentication with the Server
  • Persisting Authentication Status Across Page Refreshes
  • Saving User Data to the Server
  • Implementing Logout

1.14 Services & Dependency injection

  • Introduction to Services and Dependency Injection
  • Why do we need Services?
  • Creating a Logging Service
  • Injecting the Logging Service into Components
  • Creating a Data Service
  • Understanding Hierarchical Injector
  • How many Instances of Service?
  • Injecting Services into Services
  • Using Service for Cross-Component Communication

1.15 Authentication, Routing and Navigation.

  • Introduction
  • Configuring
  • Navigating
  • Parameterized routes
  • Adding Multiple Pages to Your App
  • Adding Your First Route
  • Accessing Route Parameters
  • Linking to Routes
  • Navigating from Code

1.16 Unit Testing in Angular Apps

  • Introduction
  • Why Unit Tests?
  • Analysing the CLI Testing Setup
  • Running Tests with CLI
  • Adding Components and Some Tests
  • Testing Dependencies: Components & Services
  • Simulating Async Tasks
  • Isolated v/s Non-isolated Tests

2.1 Angular 4

  • Major differences between Angular 1 vs Angular 2 vs Angular 4
  • Why not Angular 3?
  • What has Changed?
  • Features and Performance
  • Inbuilt many Animation Packages
  • NgIf and ngFor coding Improvements
  • Introduced ngTemplate
  • NgIf with Else for better UI handling
  • New Pipes

2.2 Angular 5

  • What is new in Angular 5?
  • Installing Angular 5
  • Components
  • Templating & Styling with HTML & CSS
  • Property & Event Binding
  • Angular 5 Animation
  • Angular 5 Services
  • Angular 5 Router
  • Deployment

2.3 Angular 6

  • Install Angular 6 with the Angular CLI
  • Understand and Create Components
  • Understand and Create Services
  • Working with HTML & CSS in Angular 6
  • Working with Angular 6 Routing
3.1 Introduction
3.2 Ionic3 CLI
3.3 Getting Started with Ionic3
3.4 Dependencies First Project Running on Browser Folder structure Add content
3.5 Creating a New Project with the Ionic 3 CLI
3.6 Running our Project in the Browser and on a Device


AngularJS fits the definition of a framework the best, even though it’s much more lightweight than a typical framework and that’s why many confuse it with a library.
AngularJS is 100% JavaScript, 100% client-side and compatible with both desktop and mobile browsers. So it’s definitely not a plugin or some other native browser extension.

Classes are held on weekdays and weekends. You can check available schedules and choose the batch timings which are convenient for you.

Towards the end of the course, all participants will be required to work on a project to get hands on familiarity with the concepts learnt. This project will be reviewed by our instructors and industry experts. On successful completion, you will be awarded a certificate.

Quick Enquiry