Interpolation

If you want to populate the DOM with data from your component as text. Anything between {{ }} is evaluated. Used to assign attributes. The thing inside the braces is a template expression, it does not have side effects.

<!-- Component HTML -->
<p>{{title}}</p>
<img src="{{itemImageUrl}}">
<p>The total is {{value + otherValue()}}.</p>

Property Binding

To pass component data through to a property, use []

<a [title]="item.name + 'details'">...</a>

Class, Style & Attribute Binding

You can bind to an individual class, style or attribute like this:

<!-- Component HTML -->
<div [class.foo]="true"></div>
<div [style.width]="100px"></div>
<div [attr.aria-label]="getAriaLabel()"></div>

You can bind multiple classes and styles using these specific Attribute directives:

<div [ngClass]="........"></div>
<div [ngStyle]="........"></div>

Event Binding

<button (click)="share()">Click me!</button>

Reference Variables

Template reference variables. Lets you access the child component from the parent template.

• # to declare
• Lets you refer to the element in the component and in template expressions.

Child:

// Child Component
...
export class ChildComponent {
	public aWord = "you're pretty cool"

	public sayTheWord(theWord) {
		alert("Word on the street is " + theWord)
}