[Angular 2] Using events and refs

For example, we have a component which just simply render router-outlet: import { Component } from '@angular/core'; @Component({ selector: 'mail-app', styleUrls: ['mail-app.component.scss'], template: ` <div class="mail"> <router-outlet

One of the most important thing when building custom form component is adding accessbility support. The component should be focusable. we can achieve this by adding 'tabindex="0"': <div tabindex="0" > Add some css class for foucs

A @Directive can also listen to events on their host element using @HostListener. This allows you to add behaviors that react to user input and update or modify properties on the element without having to create a custom component. import {Directive,

While Angular 2 usually uses event handlers to manage events and RxJS typically uses Observable.fromEvent, a good practice when using Angular 2 and RxJS combined is to use Subjects and push the value through each event so that you can use it as part

We can use @ViewChild with component: @ViewChild(AuthMessageComponent) message: AuthMessageComponent; //.... ngAfterContentInit() { if (this.message) { this.message.days = 30; } } By doing this, we actually can access component's prop and events. If

Let's say you want to write a simple data bing app. when you type in a text box, somewhere in the application will show the result. In Angular 1, you can use ng-model to finish all those stuff,  but in angular 2, the concept behind has changed. <!--

In our root component, one thing we can do is subscribe to Router events, and do something related to router events. So how can we get router event? export class AppComponent implements OnInit { constructor(private router: Router) {} ngOnInit() { thi

A @Directive is used to add behavior to elements and components in your application. This makes @Directives ideal for behaviors such as "tracking" which don't belong in a Component, but do belong as a behavior in your application. import {Direct

In some cases your application might need to upload large amounts of data, such as files. Obviously for a good UX we should provide the user some feedback on the progress of the upload. Angular’s HttpRequest object has a property reportProgress which