In this tutorial, we will learn how ngDoCheck lifecycle hook works. We will find out how to keep track of the changes to @Input properties using the DoCheck hook. We also look at the how key-value differs and Iterable differs works.

Source: Angular ngDoCheck Life Cycle Hook – TekTutorialsHub

I started digging into the Angular 2 Router a year ago when Angular 2 was still just a release-candidate (RC). At the time, the in-built Router had a fatal flaw: it wouldn’t allow <router-outlet> directives to be conditionally rendered in the DOM (Document Object Model). This was a show-stopper for a complex user interface (UI) like InVision App. To get around this, I switched over to the ngRx Router, which worked beautifully. Until the ngRx Router was end-of-lifed. At which point I just gave up and stopped experimenting with routing. Now, over a year later, I wanted to check back in with the Angular 4 Router to see if the situation had improved. And, thankfully it has. Mostly. With Angular 4.4.0, conditional Router outlets now mostly work. “Mostly” in that they are allowed; but, “mostly” in that they do break in certain circumstances.

Source: Conditional Router Outlets Mostly Work In Angular 4.4.0-RC.0

Angular CLI 1.4.0 is out with some nice new features!

If you want to upgrade to 1.4.0 without pain (or to any other version, BTW), I have created a Github project to help: angular-cli-diff. Choose the version you’re currently using (1.2.1 for example), and the target version (1.4.0 for example), and it gives you a diff of all files created by the CLI: angular-cli-diff/compare/1.2.1…1.4.0. You have no excuse for staying behind anymore!

Source: What’s new in Angular CLI 1.4? | Ninja Squad

In this part, we will introduce Angular router and learn how it can update our application when the browser URL changes and vice versa. We will also learn how we can update our application to resolve data from our backend API using the router.

Source: Angular Router: An Introduction to Component Routing — SitePoint

Beginning with version 1.3.0-rc.0, the Angular CLI makes use of the Angular Build Optimizer. This is a nifty tool that transforms the emitted JavaScript code to make tree shaking more efficient. This can result in huge improvements regarding bundle size. In this post I’m describing some simple scenarios that show the potential of this newly introduced tool. If you want to reproduce these scenarios, you find the source code used in my GitHub repository.

Source: Angular Schulung, Workshop und Beratung in Deutschland, Österreich und der Schweiz | Shrinking Angular Bundles with the Angular Build Optimizer

There’s one question that comes up again and again on stackoverflow. The question is about ngDoCheck lifecycle hook that is triggered for a component that implements OnPush change detection strategy. It’s usually formulated something like:

I have used OnPush strategy for my component and no bindings have changed, but the ngDoCheck lifecycle hook is still triggered. Is the strategy not working?

Source: If you think `ngDoCheck` means your component is being checked — read this article

Angular CLI 1.3.0 is out with some nice new features!It now officially supports ES2017 and TypeScript 2.4 and is ready for Angular 5 (which should be out shortly).You can check out what files you need to update using angular-cli-diff, for example if you are currently using 1.2.1: angular-cli-diff/compare/1.2.1…1.3.0Let’s see what new features we have!

Source: What’s new in Angular CLI 1.3? | Ninja Squad

Angular has a concept of the running application instance that you can usually inject using ApplicationRef token. There potentially can be many applications on one platform. Each application is created from the module using bootstrapModule method. This is exactly the method that is used in main.ts. So the statement shown in the docs first creates a platform and then the application instance.

Source: How to manually bootstrap an Angular application – Angular In Depth

Angular version 4.3.1 introduced one important new feature: the new HTTP client. Not only did it bring optimizations in how we can execute requests to backend APIs, but it made intercepting HTTP requests extremely easy.

Source: Intercept HTTP Requests in Angular

The import statements in Angular 2 can get pretty cumbersome if you’re using a lot of services, models, directives etc in any specific component. Looking at the basic “QuickStart”, the app.component.ts doesn’t seem very obtuse. import {Component} from ‘angular2/core’; @Component({ selector: ‘my-app’, template: ‘

Source: Shayne Boyer: Angular 2 : Organization Using {barrels}