Angular 4 News Roundup June



June has come and gone and it has brought with it a steady month of Angular 4 news. There is a chance that you could have missed a change to key features or components so I’ve listed some of the main snippets of news that may have passed you by.

Although there isn’t much reading material specifically for Angular 4 I recommend having a look at ng-book: The Complete Guide to Angular 4 here.

Its updated with Angular 4 practices and is one of the few books doing so.

Angular 4.2

The most notable piece of Angular news this month is the release of Angular 4.2. This is a small update and will not break your current Angular projects via Semantic Versioning which I covered in a previous post here.

All changes pertaining to the release are mentioned on the official blog here. So what are main highlights we should take our of this update?
Well, the changes to allow the creation of reusable animations using the animation() function enables our animations to become more modular.

I’ve listed a very similar example as the docs here for reference.

As you can see we assign our animations to a variable, specify its animation properties and then invoke it using the useAnimation function

Typescript 2.4

Typescript has also updated to a new release, bringing with it dynamic import expressions as well as Safer callback parameter checking. There could be few posts written about these changes so I’ll let the official blog post do the talking here.

I’ll just note that the dynamic imports feature in particular is a fantastic addition in this new release. It allows an even deeper layer of lazy loading and enables Webpack to split your bundles even further to only load a particular asset required in a function.

Angular IO

In order to coincide with Angular 4 features and benefits, the official website has now been converted to a full scale web application. It is now much faster and has increased its performance significantly.

There is also a satisfying element of practice what you preach and the Angular team have clearly rebuilt the website from the ground up with performance in mind.

It may seems like a minor detail but searching through the documentation has now become a better user experience which I’m sure is appreciated throughout the Angular community especially for those browsing on mobile devices.

These were the main notable Angular events and features this month. The framework is progressively evolving every month and if theres enough newsworthy item in July I’ll be sure to do a similar roundup.

Still looking to upgrade your AngularJS app to Angular 2? Check out this tutorial by Toptal here.

Angular 4 Directives Overview


If you missed our last Angular post please check it out here.

Not much has changed in terms of directives for Angular 4 so this post will be a general directive overview mentioning Angular 4 directive changes where appropriate.

Under the hood, a directive in Angular is just a plain JavaScript class that is decorated with the @directive decorator. In Angular, we have 3 different types of directives.

These are:

  • Component Directives
  • Structural Directives
  • Attribute Directives

An attribute directive tends to change the look and behaviour of an element. Whereas a structural directive will manipulate the DOM and add or remove elements depending on what action the structural directives apply.

A Component Directive uses the shadow DOM to create encapsulated visual behaviour that is typically used to create UI widgets.

Some directives go beyond the scope of this post but be sure to check out this awesome Angular book by Nathan Murray for additional information.

Attribute Directives

We will start with attribute directives and how this interacts with our DOM and data.

We can also differentiate a component from a directive using this handy table provided for here.

You can create your own attribute directives or you can use Angular’s built in directives.


A fairly simple illustration of a basic attribute directive, ngClass is added into our component element and its value is given as a class.

As you can see, we can use the ngClass attribute to assign a class based on styles that we had specified in our styles array.


In short, ngFor is a directive that outputs an array element, iterating through each element inside it.

For multiple classes, we can create an array and put those classes inside it to apply to our iterative list. We can then combine this with the aforementioned *ngFor.

The let key is part of the Angular template syntax. It creates a local variable that can be referenced anywhere in that specific template. let also creates the index i and keeps it as a reference to the current whiskey. All this is done under the hood of this directive.

What if we wanted to style the first and last item in our ngFor directive? This is actually made relatively easy by using let again to assign the first items to variable first and last to variable last.

To be as efficient as possible, ngFor will attempt to not remove and recreate these DOM elements and instead to reuse and recycle when possible. This helps with performance and prevents significant slowdown in our DOM.


ngSwitch provides us with a structural directive similar to a switch loops in JavaScript and our other Object Oriented language counterparts.

Here is a simple example that combines input button events with ourSwitchCase loop. Based on the number that value returns which is changed depending on which button is clicked, one of the divs with the *ngSwitchCase will be displayed.


NgIf adds or removes an element or elements from a sub tree based on the condition specified.

If the expression assigned to ngIf evaluates to a falsy value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

This would be similar to how the display: none property behaves in CSS.

The NgModel directive allows us to provide two way data binding to our HTML element. Whatever we type in the input field will reflect in our name element. In our sample Plunker we had to import and declare our FormsModule in order for this to work. The name attribute should also have the same value as our ngModel.

Creating our own Attribute Directive

I will be going over the fantastic introduction to creating our own directives from Angular University.

We can also create our own custom directives in Angular. In this case, this directive can be applied to any HTML element on the page and will hide this element when it is clicked.

Firstly, we need to import our Angular Directives from Angular core library into your component file.

We then need to then initialise our directive meta data decorator with the selector property of our choice. In this example its HideElement.

We then want specify the CSS classes that we want to use for the fade out transition.

And we also need an action to occur when the element is clicked so we will create a function called toggle.

We than want to use a click event that will trigger the function “Toggle” that will add or remove this fade out css class but we will not be using Angular’s (click) event so how exactly will we accomplish this?

Well, we will use the Angular directive HostListener from Angular Core. Using a Host Listener, Angular will invoke the decorated method (in this case toggle) when the our html element emits the event (when clicked).

In order to access and change properties of the Host Element we must use the HostBinding Decorator. This will check the host binding properties once a change is detected.

For a more detailed explanation of creating your own Angular directives check out this tutorial from Rangle.

If this helped you out be sure to check out our resources page for more recommended reading material on Angular.