Книга: Angular 2 Cookbook
Назад: Passing members from a parent component into a child component
Дальше: Registering handlers on native browser events

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 .

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.io/resources/images/logos/standard/logo-nav.png';   }

With this setup, the <img> element will dutifully fetch and show the image when it is provided by Angular.

How it works...

This is a different solution to the same problem that ng-src solved in Angular 1. The browser is looking for an src attribute on the tag. Since the square brackets are included as part of the attribute string, the browser will not find one and therefore not make a request. [src] will only make an image request once the value is filled and provided to the element.

See also

  • Passing members from a parent component into a child component goes through the basics of downward data flow between components.
  • Registering handlers on native browser events demonstrates how you can easily attach behavior to browser events.
  • Attaching behavior to DOM elements with directives demonstrates how to attach behavior to elements with attribute directives.
  • Referencing elements using template variables demonstrates Angular 2's new template variable construct.
  • Attribute property binding shows Angular 2's clever way of deep referencing element properties.
Назад: Passing members from a parent component into a child component
Дальше: Registering handlers on native browser events

[email protected]
thank you
Flame
cant read the code since it is all on a single line. Also this comments section is russian
Rakuneque
DATA COLLECTION AND ANALYSIS Two reviewers extracted data and assessed methodological quality independently lasix torsemide conversion Many others were in that space already