Angular 2 – What’s New

Posted on by Andrew

This post on Angular 2 was co-authored by Landon Cline

It’s no secret that the JavaScript world is moving incredibly quickly to the point of exhausting anyone actively involved in developing products using a remotely ‘modern’ JS style.

With your JavaScript fatigue on the backburner, let’s talk Angular 2.

Why the fuss over a version change (Angular 1 > Angular 2)?

So much has changed in Angular 2 that it is important to think of it as an entirely new framework and leave what you know about Angular 1 at the door. While Angular 1 is still an awesome framework one of the core things Angular 2 tries to accomplish is to be more performant and offer guidance on a recommended architecture. Although it has not been released yet the Angular 2 CLI tool will help with scaffolding, generators and built in testing suites (Angular unit testing…not just a myth anymore).

For a reference guide on some of the syntax changes for Angular 1 vs Angular 2 checkout this article.

Major Decorators

JavaScript Decorators are an ES2016 construct, not specific to AngularJS. Angular 2 has several major decorators that they employ.

In Angular 2 Decorators typically declare classes that provide metadata about the component.

@Component({ … });

@Directive({ … });

@Pipe({ … });

@Injectable({ … });

@Input();

@Output();

@RouteConfig([ … ]);

Input

The Input() decorator declares a property binding usually sending data into a component.

// Your component JavaScript
@Component({
    selector: 'example-component'
})

export class ExampleComponent {
    @Input() title: string;
}

// Your component HTML
<example-component [title]="'Some title'"</example-component>

Output

The Output() decorator declares an output property that can be subscribed to using an Event Emitter (which implements RxJS).

// JavaScript component emitting an event
export class ExampleComponent {
    @Output() foo: EventEmitter = new EventEmitter();
    sendEvent() {
        this.foo.emit(value);
    }
}

Pipes

A Pipe takes in data as an input and transforms it in some way. String modification, for example.

There are several built in pipes including:

  • Date
  • Decimal
  • Percent
  • Uppercase / Lowercase

 

// Custom pipe
@Pipe({
    name : ‘customPipe’
})
export class customPipe {
    transform(value){
        return value.toString().replace();
    }
}
@Component({
    pipes: [customPipe]
})

// Pipe in use in a component
<p>{{foo | customPipe}}</p>

Routing

The Angular Router navigates users from view to view and allows passing custom data to individual routes.

Angular 2 routing is managed through the @RouteConfig() decorator. You do have the option of using either an HTML5 Location Strategy using the history pushState or the older HashLocationStrategy “hash bang” method.

@RouteConfig([
    {
        path: '/',
        name: 'Home',
        component: HomeComponent,
        useAsDefault: true,
        data: {
            hideSideNav: true
        }
    }
])

Dependency injection

Angular has it’s own dependency injection (DI) framework. You use the @Injectable(); decorator to mark a method as something that can be injected. After that you need to include it as a provider and in the constructor of the component you want to use it in.

If you want to use an injected component in the entire application it should be added in your parent component but not bootstrapped into the providers

// Your class where you declare the injectable component.
@Injectable()
export class ExampleComponent { … }

// The component you are injecting into.
@Component({
    selector: ‘my-app’,
    template: ``
    providers: [
        ExampleComponent
        ]
})

export class AppComponent {
    constructor(_exampleComponent: ExampleComponent) { … }
}

Projection

Transclusion in Angular 1 is now referred to as Projection. This allows a way for a parent component to insert markup into a child component. The <ng-content> tag is used to accomplish this and helps to keep your nested components flat.

@Component({
    selector: 'my-thing',
    template: `left  right`,
})
class MyThing {}
@Component({
    selector: 'my-app',
    template: `INSERTED`,
    directives: [MyThing],
})
class MyApp {}

Next Steps

There are a ton of resources out there for learning more about Angular 2. A few that we found very useful for our most recent project are:

Leave a Reply

Your email address will not be published.