Data Binding In Angular 2

<hero-detail [hero]=”selectedHero”></hero-detail>
<li (click)=”selectHero(hero)”></li>
<input [(ngModel)]=””>

(for whatever reason Medium isn’t formatting the above appropriately so it’s not in a code box)

{{}} interpolations allows you to show a component property in the HTML.

{{}} interpolations allows you to show a component property in the HTML.

[hero] is a property binding that allows you to pass the value of the selectedHero from the parent HeroListComponent to the hero property of the child HeroDetailComponent.

(click) is an event binding that calls the component selectHero method.

[(ngModel)] is an event binding wrapped in a property binding. Thus it is a two-way binding within the component. When the component is instantiated it gets the value from the component. When you change this value using the input box, it updates the property in the component.


A component is a directive-with-a-template; a @ComponentDecorator is actually a @Directive decorator extended with template-oriented features.

Two other kinds of directives exist: structural and attribute directives.

Structural directives alter layout by adding, removing, and replacing elements in DOM.

<li *ngFor="let hero of heroes"></li>
<hero-detail *ngIf="selectedHero"></hero-detail>
  • *ngFor tells Angular to stamp out one <li> per hero in the heroes list.
  • *ngIf includes the HeroDetail component only if a selected hero exists.

Attribute directives alter the appearance or behavior of an existing element. In templates they look like regular HTML attributes, hence the name.

<input [(ngModel)]="">


Almost anything can be a service. A service is typically a class with ah narrow, well-defined purpose. It should do something specific and do it well.

Components are supposed to be lean. A good component presents properties and methods for data binding. Anything besides that is usually best left to a service.

We use dependency injection to supply a new instance of a class with dependencies (usually services).

Angular can tell which services a component needs by looking at the types of constructor parameters, but it needs to be added to the boostrapping of the app (discouraged)

bootstrap(AppComponent, [

or through a provider (of self ),

providers: []

or imported as a module that is instantiated in the Controller class constructor (if available to a parent Controller).

constructor(private service: HeroService) { }

When a dependency is shared between a parent and a child it is a singleton between them both.


This marks a class as available to an injector for instantiation. Generall speaking, an injector will report an error when trying to instantiate a class that is not market as “@Injectable()”.

Example of a logger service (always remember to import Injectable and use bananas ().)

import { Injectable } from ‘@angular/core’;  //remember to import!!!
@Injectable()  //remember to use the bananas!!!
export class Logger {
logs: string[] = []; // capture logs for testing
log(message: string) {

Advanced topics to research: Alternative class providers, factory providers, tokens(bottom of this page)

Show your support

Clapping shows how much you appreciated Chris Savage’s story.