Angular 2 - Superheroic Framework

Be a Superhero in your organization by learning Angular 2 Framework
4.7 (20 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
694 students enrolled
25% off
Take This Course
  • Lectures 30
  • Length 3 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2016 English

Course Description

If you are not familiar with Angular Framework and if you have question in your mind that

From Where i should start learning Angular 2 ?

- Do i need to Choose JavaScript or TypeScript with Angular application ?

- How can i learn Angular 2 as quick as possible ?

Then this Course is answer of these questions.

I am dealing with AngularJS Projects and Providing training on this from Couple of years and i know most students get confused with different terms of Angular and they need easy and cool way to understand some complex concepts. After great success of some angularJS courses on Udemy i decided to put this course on Angular 2 for my Students.

This is just beginning as i will keep adding new videos on this because Angular 2 is Endless.

It is perfect for those who has Knowledge of JavaScript, HTML and CSS, Knowledge of object oriented programming is optional but will be helpful if you know.

What are the requirements?

  • Installation and Configuration steps are already there in this course so there is no prior steps required, All you need is computer connected with internet connection.

What am I going to get from this course?

  • At the end of this course students will be able to understand Angular 2 and some important parts of the Framework like Components, Bindings, Dependency Injections, Services, Interpolation, Custom Directives, Routing, Decorators etc with some important concepts which are useful in real life business application development.
  • This course will help those students who are having knowledge of JavaScript, CSS and HTML and willing to explore Angular 2 Framework with step by step code samples, Also this will help those who are already familiar with old version of Angular and now want to migrate to latest version.

Who is the target audience?

  • This Azure course is for newbies who are not familier with Angular 2 and TypeScript and wanted to learn it in a quick and easy way
  • This course is not for you if you are not familiar with HTML, CSS and JavaScript basics.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Getting familiar with Angular 2

This is introduction of the course.

Section 2: Introduction of the Course

This lecture clears the confusion of how angular and angularJS both are different and why we have to use TypeScript with angular 2 ?


This lecture explains how to setup development environment for angular 2 application. also please find starter files in same lecture.


In this lecture we add required libraries in to our project using npm.

Section 3: Understanding Component

In this lecture i am explaining component and creating new component with template, Decorator and Class using visual studio code.  also i am using interpolation binding for some of my HTML tags in template UI.


This is continue concept of last lecture and in this i am explaining how component is connected with the HTML page and usage of custom directive in that.

Section 4: Understanding Angular Bindings

This lecture explain simple one way binding of angular which is knows as interpolation and it is useful when we want read only kind of binding.


This lecture explain Two way binding and Event Binding and also compare syntax of all three bindings for better understanding.


This lecture explains how can we bind collection of data using *ngFor directive of angular, i am also using *ngIF in this same lecture.


This lecture explains that if we have another component in application then how we can add it and set it to main component of the application.


This lecture explains how to deal with change event and lost focus event of the controls using angular event bindings.


In this lecture i am covering how to change CSS properties and classes at runtime using angular directives like ngClass and ngStyle.


This lecture is a quick recap of whatever we have learned up to this point. i am doing this because before we move ahead with the next section i want you to understand these basics first.

Section 5: Angular Avengers - Single Page Application of Angular 2

This lecture explain working demo of SuperApp application which we are going to create in this section.


in this we are setting up  project using starter file provided in this lecture.


in this lecture we will add new component AppComponent which will be main component of this application.


In this lecture we will create Hero List Component with the proper HMTL tags using bootstrap classes.


In this lecture i have created some properties in Hero List Component and applied bindings with HTML UI. i have also used some pipes in this but i will cover that in depth in future sections.


In this lecture we are applying bindings for Hero Image and then we are dealing with click event binding or Show Image Button.


In this lecture we are Making our heroes Collection Strongly typed with the help of Interface of TypeScript. because of this that will show compile time type checking.


this lecture customize Visual Studio Code workspace and  we will assign custom CSS class in our hero list component using styleUrls in component decorator.


This lecture explains how we can associate life cycle hooks of angular 2 component in our application code.


In this lecture we have created custom pipe using @Pipe decorator and using that we have filtered hero list collection.


in this lecture we are creating custom angular service using @Injectable decorator.


In this lecture i am injecting service in app component using providers.


In this lecture i am trying to get data from server using angular2/http and to deal with that i am using observables from reactive extensions.


In this lecture we are trying to understand angular 2 routing concept


In this lecture i am configuring routing in my app component and by this my welcome and heroList component will be connected with app component.


In this lecture we are adding logic to the hero detail component and based on that we are creating proper User interface in HTML page.


In this lecture we are customizing hero list component so that we add link to our hero name with which we can navigate to particular hero's detail. 

5 questions

Thank you for completing this course, i hope you will clear this quiz easily as now you have Super Powers of  Angular 2.  

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Maruti Makwana, MCT-Corporate Trainer

I am providing trainings to different IT corporates from last 11+ Years on different Microsoft Technologies and some JavaScript Technologies.i am here to make my lectures online so that everyone can access my knowledge throughout the globe.

i know my strength that i can make complicated things simple and I will be happy if people like my videos and ask questions to me regarding technologies i know. My expertise is mostly on following technologies.

ASP NET MVC 5, Microsoft Azure, Sharepoint 2013, Windows Store Apps, Angular JS, Knockout JS, WebGL, Ember JS, Jquery,HTML 5, CSS3, WCF, WPF, etc

Ready to start learning?
Take This Course