Templates

• A template is HTML that tells Angular how to render a component
• Templates include data bindings as well as other components and directives
• Angular leverages native DOM events and properties which dramatically reduces the need for a ton of built-in directives
• Angular leverages shadow DOM to do some really interesting things with view encapsulation

External Template

@Component({
    selector: 'app-items-list',
    templateUrl: './items-list.component.html',
    styleUrls: ['./items-list.component.css']
})

export class ItemsListComponent {
    @Input() items: Item[];
    @Output() selected = new EventEmitter();
    @Output() deleted = new EventEmitter();
}

Inline Template

@Component({
    selector: 'app-items-list',
    template: `
     <div *ngFor="let item of items" (click)="selected.emit(item)">
        <div>
            <div><h2>{{item.name}}</h2></div>
            <div>{{item.description}}</div>
        </div>
     </div> 
     `,
     styleUrls: ['./items-list.component.css']
})

export class ItemsListComponent {
    @Input() items: Item[];
    @Output() selected = new EventEmitter();
    @Output() deleted = new EventEmitter();
}

---

Children

1. Directives
2. Local Template Variable
3. Safe Navigation Operator

---

Backlinks

• Components
• Data Binding