Let’s see two new features that are going to be in Angular version 4. ( unless something will change )

💪 Super ngIf directive :

The ngIf directive now supports the else Input that takes a template reference to render when the condition is false.

The second Input that the ngIf directive support is the then Input . This option becomes handy when you need to render a template when the condition is true or if you need to change the template reference at runtime.

At first, it can be a little confusion, but you can read it like normal javascript:

if( condition ) {

showThenTpl();

} else {

showElseTpl();

}

The last add-on is that now you can store the result of the condition in a local variable.

For example:

When our user variable is null, Angular will render the loading template, and after 2 seconds Angular will render the div with the ngIf directive.

You also have access to the results of the condition locally in your template so it can repeatedly be bound in more efficient way.

There are several benefits to this approach:

We are using the async pipe only once ( one subscription ). There is no need to use the safe-traversal-operator. ( the question mark ) We can display an alternative template while waiting for the data.

Cool! 😎 You can play with the code here.

👏 NgComponentOutlet:

NgComponentOutlet is a new directive that provides a declarative approach for dynamic component creation.

If you already experienced with dynamic component creation in Angular version 2 you probably know that it takes some boilerplate and deeper understanding of things.

Let’s see how Angular version 4 make our life easier:

We are using the ng-container directive with the NgComponentOutlet that takes as Input a reference to a component. So easy!

Don’t forget to add your dynamic components to the entryComponents section of your module. You can read here why you need to do this.

The NgComponentOutlet directive takes as Inputs additional advanced options (from the docs):

ngOutletInjector — Optional custom Injector that will be used as a parent for the component. ( Defaults to the injector of the current view container ) ngOutletProviders — Optional injectable objects that are visible to the

component. ngOutletContent — Optional list of projectable nodes to insert into the content. (ng-content)

You can play with the code here.

Last but not least -

You don’t need to add the novalidate attribute to your forms by yourself anymore; Angular will add it for you by default. NgTemplateOutlet now compatible with * syntax.

<ng-container *ngTemplateOutlet="templateRefExp;

context: contextExp">

</ng-container>

👉 Give me some ♥️ by clicking the heart below