Angular Runtime Performance Guide – The Oasis Digital BlogThe Oasis Digital Blog

Smooth, highly-responsive interfaces increase users’ confidence in an application and create an overall positive experience. Whereas small applications with simple interactions are built without a focus on runtime performance, standard approaches sometimes do not scale well as the data size or feature complexity increases. A common scenario that may be familiar to the reader is a table that works well with small quantities of data but begins stuttering and lagging when the amount of data is increased. This guide will show how to increase performance in these kinds of applications.

Source: Angular Runtime Performance Guide – The Oasis Digital BlogThe Oasis Digital Blog

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

By Ben Nadel on 

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

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

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

Shrinking Angular Bundles with the Angular Build Optimizer

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

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

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

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

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

How to manually bootstrap an Angular application – Angular In Depth

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