One of the simplest imaginable components we can build is a template element that interpolates some values into its template. In Angular 1, one way this could be achieved was by creating an element directive, attaching some data to the scope inside the link function, and a template that would reference the data. I selected this description specifically because nearly all those concepts have been binned.

Suppose you want to create a simple article component with a pseudo template as follows:

<p>{{date}}</p> 
<h1>{{title}}</h1> 
...

Suppose you had a simple application that intended to (but currently cannot) pass data from a parent ArticleComponent to a child AttributionComponent:

 [app...

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...

Suppose you wanted to create an article application that counted shares, and you began with the following skeleton:

[app/article.component.ts]
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'article', 
  template: ` 
    <h1>{{title}}</h1> 
    <p>Shares: {{shareCt}}</p> 
    <button>Share</button> 
  ` 
}) 
export class ArticleComponent { 
  title:string = 'Police Apprehend Tiramisu Thieves'; 
  shareCt:number = 0; 
} 

The Angular 2 event binding syntax is accomplished with a pair of parentheses surrounding...

Suppose you had an Article application as follows:

[app/text-editor.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'text-editor', 
  template: ` 
    <textarea></textarea> 
  ` 
}) 
export class TextEditorComponent {} 
 
[app/article.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'article', 
  template: ` 
    <h1>{{title}}</h1> 
    <p>Word count: {{wordCount}}</p> 
    &lt...

Suppose you have the following application:

[app/article.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'article', 
  template: `<h1>{...

Suppose you had the following application:

[app/ad-section.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'ad-section', 
  template: ` 
    <a href="#">{{adText}}</a> 
  ` 
}) 
export class AdSectionComponent { 
  adText:string = 'Selfie sticks 40% off!'; 
} 
 
[app/article.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'article', 
  template: ` 
    <h1>{{title}}</h1> 
    <p>U.S. senators are up in arms following the...

Suppose you had the following application:

[app/article-list.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'article-list', 
  template: '' 
}) 
export class ArticleListComponent { 
  articles:Array<Object> = [ 
    {title: 'Foo', active: true},  
    {title: 'Bar', active: false}, 
    {title: 'Baz', active: true} 
  ]; 
} 

Your objective is to iterate through this and display the article title only if it is set as active.

Suppose you had the following application and wanted to directly access the input element:

[app/article.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'article', 
  template: ` 
    <input> 
    <h1>{{title}}</h1> 
  ` 
}) 
export class ArticleComponent {} 

Angular 2 allows you to have a # assignment within the template itself, which can consequently be referenced from inside the template. For example, refer to the following code:

[app/article.component.ts] 
 &...

Suppose you had the following application:

[app/article.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'article', 
  template: ` 
    <input #title (keydown)="setTitle(title.value)"> 
    <h1>{{myTitle}}</h1> 
  ` 
}) 
export class ArticleComponent { 
  myTitle:string; 
 
  setTitle(val:string):void { 
    this.myTitle = val; 
  } 
} 

Your objective is to modify...