Templates

@Component({
    template: ‘…’,
    // or
    templateUrl: ‘app/template.template.html’
})

import { Component } from '@angular/core';

@Component({
    selector: 'course',
    template: '{{ title }}'
})
export class CourseComponent {
    title: string = "Java J2EE";
}

Template variables ( reference to native DOM )

@Component({
    selector: 'course',
    template: `
    <input type="text" #name>
    <p>{{ name }}</p>    
    <button (click)="passValue(name.value)">Pass Value</button>
    `
})
export class CourseComponent{
    passValue(val){
        console.log(val);
    }
}

Template variable - Directive

Because directive enhance component, we can create template variable for origional component or enhanced one ( component + directive )

@Component({
    selector: 'my-app',
    template: `
    <form #myForm="ngForm" (ngSubmit)="submitForm(myForm)">
        <input type="text" id="name" name="name" ngModel>
    </form>    
    <div>{{ values | json }}</div>
    `
})
export Class MyComponent{
    values: any;
    submitForm(form: NgForm){
        this.values = form.value;
    }
}

Template Projection

• Ability to pass HTML to a child component and have it rendered their

• Was called transclusion in Angular 1

• Where to render passed component placeholder is <ng-content>

@Component({
    selector: 'my-app',
    template: `
    <my-child>
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.</p>
    </my-child>
    `
})

// child component
@Component({
    selector: 'my-child',
    template: `
    <h2>In child component</h2>
    <ng-content></ng-content>
    `
})
export class ChildComponent{

}