Angular 4 - Concepts, Code and Collective Wisdom
4.5 (190 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.
948 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 4 - Concepts, Code and Collective Wisdom to your Wishlist.

Add to Wishlist

Angular 4 - Concepts, Code and Collective Wisdom

Learn the core concepts, play with the code, become a competent Angular 2 developer
4.5 (190 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.
948 students enrolled
Created by Mark Rajcok
Last updated 4/2017
Current price: $12 Original price: $50 Discount: 76% off
4 days left at this price!
30-Day Money-Back Guarantee
  • 4.5 hours on-demand video
  • 4 Articles
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • Understand the core concepts and building blocks of the framework: Components, Templates, Data Binding, Services, Dependency Injection, and Change Detection
  • I guarantee you'll learn things that are not in the Angular documentation
  • Thoroughly understand how change detection works, some pitfalls, and how to make it even more efficient for your app
  • Learn how to "think in Angular 2" to architect your next project using Components, Directives, Services and Domain Models
  • Fully understand all of the different types of data binding provided by the framework
  • Understand how data flows through the system, and the various ways that components can communicate with each other and with services
  • Pick up some TypeScript and ES6/ES2015 features that you'll use often with Angular 2, like classes, metadata, decorators and arrow operators
  • Learn best practices and conventions
  • Become aware of common errors (we'll make them together) and see how to quickly fix them
  • Confidently start writing your own Angular applications
View Curriculum
  • You should have some JavaScript experience
  • Typescript, ES2015, and Angular 1 knowledge is not required

All Plunkers and GitHub repos used in this course have all been updated to use Angular v4.

This course focuses on the core concepts of Angular 2.  Particular attention is given to the following areas:

  • Change Detection - although this is at the heart of Angular 2, it is not yet widely understood. I'll explain all aspects of change detection. (Many of the questions I've answered on StackOverflow for Angular 2 are due to a lack of understanding of how change detection works.)
  • Dependency Injection - see how this feature is much improved in Angular 2 over Angular 1's version.
  • Data Binding - I'll describe and demonstrate all of the different binding types in Angular 2, but more importantly, I'll illustrate (with detailed pictures) how the bindings actually work -- i.e., the component and DOM interactions.  I'll also examine the common sources of confusion developers have when binding using JavaScript reference types in Angular 2 apps. 
  • Inter-Component Communication and Data Flow - learn how to manage data flow through your Angular 2 application, and how to insert logic hooks that trigger when data becomes available or when data changes.

By the end of this course, you'll be sought after for your knowledge of these four areas. (And consider using your new-found knowledge to help answer Angular 2 questions on StackOverflow.)

Take this course if you are a developer who wants to quickly learn Angular 2 concepts without having to read the online docs, blog posts, GitHub issues, and StackOverflow posts. I've attempted to digest much of that Angular 2 information for you, and I've attempted to streamline this course as much as possible -- no fluff!

I'll teach you how to architect an app and how to "think in Angular 2." I'll discuss the real and conceptual trees that Angular 2 builds and uses to achieve very fast change detection and multi-level dependency injection.

While exploring the concepts I'll iteratively develop an Angular 2 app that utilizes all of the core concepts. I'll also show you a number of separate, small Angular 2 Plunker apps that demonstrate specific framework functionality. I'll spend time discussing some of the recurring issues that I've seen come up on StackOverflow with the angular2 tag, and I'll discuss some StackOverflow posts that reveal new techniques that you can't find in the Angular 2 documentation.

Along the way, while you're learning Angular 2, you'll also learn some TypeScript and ES6/ES2015 features.

Note: this course is still under development. Changes will be made, and additional lectures and quizzes will be added.  E.g., expect some lectures on NgModule, the Angular Router and Forms.  There is a changelog at the end of this course -- i.e., it is the last "lecture".

Thank you for your interest in this course.  As of 2017-02-18 I've donated 6.7% of the earnings (so that's before taxes) from this course to helping people around the world (mostly education, farming, and health projects) through Zidisha.

Some student reviews:

  • "Straight and to the point. Love it."
  • "If you liked Anthony Alicea's amazing Udemy course on Angular 1, you will love Mark Rajcok's course on Angular 2. Both courses emphasize a deep understanding of the material, not just code mimicry. There are already some good courses on Angular 2 out there; however, no one taught me how to "think in Angular 2" better than Mark."
  • "This is truly a fantastic course, it is very well thought out and delivered. I have completed many courses and tutorials and there are a lot of good ones out there, but this was the first course that I felt really explained the framework, concepts and best practices. There are many things in this course that I learnt to do in other courses but never really understood why, Mark traverses that gap in a very structured and clear way... His combination of theory and explaining things with diagrams and then following up with clear coding examples really makes a difference in this course..."
  • "I really like the approach in this course. Getting to understand how things work, not just how to do things."
  • "Bravo! A must see for Angular 2 developers. Clear and comprehensive instruction with excellent quiz usage. A+"
  • "i've purchased 3 other Angular 2 video series and this is the best so far"
  • "I have taken 5+ Developer oriented courses here on Udemy and consider myself a pretty competent developer. This instructor is the best one I have ever seen. He thoroughly explains concepts and tells us the inner workings of angular and why we do things the 'angular way'. A+++ Highly recommend."
  • "very informative and the major topic was change detection which was fantastic."
  • "the stated material is very interesting and cannot be found in other courses"
  • "I like the way this course, is more focused on why and how to help yourself writing better, efficient coding. Really helpful."
  • "Mark provides with his broad knowledge teaches not only code, but also the context of the code within ng2. For a serious ng2 developer a must do course."
  • "This course was great discovery for me. Before taking it, I was already quite familiar with Angular 2. But still, course provided me with huge amount of useful informations, and clear, to-the-point explanations of not so much understood Angular 2 concepts. I think any serious Angular 2 developer can get great benefits from taking this course. ... take this course to deepen and fortify the knowledge about the framework. In a single place, course explains things about the framework which are very hard to find elsewhere. Furthermore, many additional resources are provided for further learning, which are not only useful by them selfs, but also introduce attendees to the, already vast, Angular 2 ecosystem."
  • "Dev wisdom in a folksy, non-pretentious style. If you are trying to learn Angular 2, you would likely be best learning from two or three different instructors. This course doesn't purport to be "the only course you need to learn Angular 2"... and it isn't. Instead, it's a great compliment to an Angular 2 "from the ground up" course. Do that one first, and then do this one."
Who is the target audience?
  • This course is for developers who want to thoroughly learn Angular 2 concepts
Compare to Other AngularJS Courses
Curriculum For This Course
75 Lectures
3 Lectures 08:26
  • Should you take this course?  Let's find out.
  • I'll explain what my goals are for this course and for you.
  • I'll review what you'll learn, including a brief overview of the full curriculum.
  • Learn a little bit about me, my interest in Angular over the past few years, and my StackOverflow contributions.
Preview 06:19

Let's see the sample application

A note about Angular 4
5 Lectures 15:02

Learn how a component is a combination of an HTML template, self-contained CSS styles, and "view-glue" logic.
We'll look at our first component in a Plunker. I'll explain what component metadata is.

Preview 03:49

We'll see our first databinding example, which uses string interpolation.  
Learn how component CSS styles are normally isolated from the rest of your application.
Understand how constructors are special in Angular.  I'll also give a quick overview of ES2015 classes.
Learn how to avoid common mistakes when writing your own components.

Styles, classes, constructor arguments, common mistakes

I'll describe some of the reasons to use TypeScript, and why you should use it to develop Angular 2 applications.

We'll take a quick peek at Visual Studio Code and you'll see how this TypeScript-aware editor can catch syntax errors.

I'll provide some videos and links to learn more about TypeScript and ES2015 features.


Learn how components compare to Angular 1 concepts.
I'll discuss some best practices to follow when creating components.

More component features; component best practices

About the Quizzes

Components and TypeScript
16 questions
Templates and Data Binding
5 Lectures 18:39

Learn how component templates use HTML plus some special Angular syntax.
I'll enumerate the different types of data bindings that Angular has.


We'll learn how interpolation binding, {‌{}}, binds to DOM property textContent.

Preview 02:48

We'll learn how databindings in Angular are dynamic, and how Angular change detection plays a role.
I'll introduce our first lifecycle hook, ngOnInit().
I'll also show you what an arrow function expression is, and encourage you to use the MDN website for all things JavaScript.

Dynamic data Binding, lifecycle hook ngOnInit(), and arrow functions

Learn what Angular template expressions are and their restrictions, including "the idempotent rule".

We'll use a Angular built-in pipe to transform our data for viewing, and we'll look at what other pipes Angular ships with.

Learn what the "Elvis" operator is, and why it is extremely useful (and why a there is a question about it practically every week on StackOverflow).

Template Expressions, Pipes, and the Elvis operator

Since violating the idempotent rule is a recurring issue on StackOverflow, we're going to show you exactly what it means to violate this rule.

I'll also use this deep-dive excursion to introduce TypeScript getter functions.

Idempotent rule -- deep dive; TypeScript getter

Templates and Data Binding
16 questions
Multiple Components
1 Lecture 02:00

Before I discuss more databinding techniques, we need to break up our simple Plunker app into 4 separate components.

I'll discuss element selector naming conventions and I'll show you how I could simplify some CSS styling now that we have separate components.

Multiple components
More Data Binding
4 Lectures 16:48

Learn how we can bind a parent property to a child property.  We declare the child property to be an "input" property, and we use Angular's template syntax to declare the binding in the parent's template.

Input properties allow parent components to send data to child components.
Learn how Angular change detection plays a role in propagating the data down the component tree.

Preview 03:45

I start creating our one-way databinding summary table.

We review interpolation and property binding, highlighting how they are not the same.  The subtle difference is that interpolation binding always results in a string result being bound.

Interpolation vs Property Binding

Learn the important differences between HTML attributes and DOM properties.

HTML attribute values don't change.

Often an HTML attribute has a corresponding DOM property and vice versa, but not always!

HTML Attributes and DOM Properties

Learn about Angular's template syntax for attribute, class, and style binding.

Also learn about the preferred way to bind classes and styles -- using built-in Angular directives NgClass and NgStyle.

Attribute, Class, and Style Binding

Data Binding - part 2
10 questions
Attribute Directives
1 Lecture 03:17

Learn what attribute directives are, and how they are used to modify appearance or behavior.

The Simple Attribute Directive
Event Binding
4 Lectures 16:46

Learn how to bind a component method to a DOM click event using the parentheses syntax.

I'll describe what happens when a button is clicked in an Angular app... how the event handler runs, then how Angular change detection runs and propagates values changes to parent components and then to the DOM.

DOM Event Binding

Learn how to bind to any DOM event.

The $event keyword can be used to access the DOM event in your event handler in your component.

DOM Events

Learn how local template variables can be used to send useful values to your component event handlers, rather then raw DOM events.

I'll show you some special Angular syntax for dealing with keyboard events.

Preview 03:26

Learn what Angular template statements are and their restrictions.

I'll show you how to write a no-op template statement that triggers change detection.

Template statements have a statement context.

Learn what the $event keyword can contain.

Find out why template statements have fewer restrictions and are not as tricky as compared to template expressions.

Template Statements

Attribute Directives and Event Binding
17 questions
TypeScript Editor, Development Environment, TypeScript Interfaces
3 Lectures 09:06
Download apps from GitHub

Plunker was nice, but we've outgrown it for our app.  I've made a number of enhancements to the Q&a App, and I take this opportunity to switch to Visual Studio Code, an editor written in TypeScript and that is TypeScript aware.

We take a look at the online Angular 5-min quickstart, since we're using the same development environment now.

Visual Studio Code, a TypeScript-aware editor

Learn about TypeScript interfaces, which give us consistent type checking across a set of objects.

I introduce some of the enhancements I've made to our Q&A app.

TypeScript Interfaces
Structural Directives
3 Lectures 12:29

I'll present a brief overview of structural directives and the "*" syntax shortcut, then we'll learn how to use NgIf to conditionally add or remove a chunk from the DOM.

NgIf templates are parsed by Angular, hence components and directives can be added and removed with NgIf.

We'll make some common syntax mistakes so that when you make the same mistakes when you first start writing Angular code, you'll already be familiar with them.

Structural Directive Overview and NgIf, the conditional structural directive

Learn how to switch between multiple templates, not just one, using NgSwitch.

I'll also show you how to put your HTML template in a separate file, which allows for HTML syntax highlighting.

Preview 03:37

Learn how to iterate over a dynamic list to add or remove a template to or from the DOM multiple times.

Learn about the exported values index, last, event, and odd.

We'll look at a StackOverflow question and answer about trackBy, which can be used to specify our own object identity tracking, which is sometimes needed, since Angular's default tracking is sometimes insufficient.

I'll show you how to use NgFor to stamp out multiple instances of a custom component (not just DOM elements).

The workhorse structural directive: NgFor

Structural Directives
10 questions
Parent-Child Communication
3 Lectures 10:35

Learn how we can send data from a child property to a parent property by emitting an event on the child's output property.  We declare a child property to be an "output" property, which is always an EventEmitter, and we use Angular's template syntax to declare the event binding in the parent template.

Output properties enable  parent components to send data to child components. Learn how Angular change detection plays a role in propagating the data down the component tree.

Output Properties / Component Custom Events: Child-> Parent Communication

We review input and output property operation, and how they achieve two-way communication between a parent component and a child component.

I discuss how input and output properties define the public API of a reusable component.

Parent <-> Child Communication
12 More Sections
About the Instructor
Mark Rajcok
4.5 Average rating
190 Reviews
948 Students
1 Course
#1 AngularJS and #3 Angular2 Answerer on StackOverflow

I've been a programmer for 30+ years.  It is my career and my hobby.  I have experience developing full-stack web apps, server-side multi-threaded programs, near real-time embedded systems, and writing programs to extract data from Hadoop clusters.  Back in 2013 I became interested in AngularJS and soon after I started to spend a lot of time helping people learn the framework on StackOverflow and I got hooked.  At the end of 2015, I started learning Angular 2 and once again I started answering questions on StackOverflow.  The knowledge I've acquired I'll share with you.