Binding to native element attributes

In Angular 1, it was expected that the developer would utilize the built-in replacement directives for element attributes that had meaningful DOM behavior attached to them. This was due to the fact that many of these attributes had behavior that was incompatible with how Angular 1 data binding operated. In Angular 2, these special attribute directives are done away with, and the binding behavior and syntax is subsumed into the normal binding behavior.

Note

The code, links, and a live example of this are available at http://ngcookbook.herokuapp.com/8313/.

How to do it...

Binding to the native attribute is as simple as placing square brackets around the attribute and treating it as normal bound data:

[app/logo.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'logo', 
  template: '<img [src]="logoUrl">' 
}) 
export class LogoComponent { 
  logoUrl:string = 
    '//angular...