Breaking changes from Angular 2 beta to final release candidate

If you’re using the Angular 2 beta version and want to upgrade to angular 2 final release candidate, it’s a good idea to be aware of the breaking changes from beta to final release. I followed a few youtube tutorials and struggled with it, so here is what i learnt:

Most of the content that was posted earlier on internet forms and youtube tutorials deals with Angular 2 beta. I waited for quite a while to move to angular 2 so that it matures before adopting it. But even then the relevant study material is old and you can’t really follow it word by word.

Module Names

Angular packages have been renamed from angular2 to @angular.

import { Component } from ‘@angular/core’;

Components and Directives

In Beta, you had to register a component or directive in directives attribute of the host component:

@Component({
  directives: [FirstComponent, SecondComponent]
})
export class MyCoolComponent { }

In the Final Release, directives is removed from component metadata.

You should register all components and directives in AppModule (The main app’s root module) or the module they belong to (on sub level). Like the following:

@NgModule({
  declarations: [MyHostComponent, ComponentA, DirectiveA]
})
export class AppModule { }

Directives

To access a DOM element, use this.el.nativeElement instead of this.el.

this.renderer.setElementStyle(this.el.nativeElement, ‘width’, ‘200’);

ngFor Syntax

With angular’s final release, the syntax for for loop has changed.  You should now be using the let keyword. here is how to upgrade all your for loops to new syntax.

In Beta:

*ngFor=“#course of courses”

In the final version:

*ngFor=“let course of courses”

Note: I’d keep this post updated if I find anything else as I continue with my study.