
A New Syntax for Angular Templates

Angular Templates & Time To First Commit
Tired of Importing Modules
To interpret the content of a template, the runtime needs to know what component and directives to apply to the element and what pipes are referenced by binding expressions. The list of candidate components, directives and pipes are determined by the NgModule
in which the component is declared.
Which Module Should I Import Again?
<form [formGroup]="sandwichForm">
Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’
ReactiveFormsModule
How did you know which module you should import?
Ng VDom
export class AppComponent extends Renderable {
render() {
return (
<h1>Hello World!</h1>
)
}
}
A New Way of Writing Templates
ngMarkup
@Component({
selector: 'mc-greetings',
template: `<h1>Hi {{ name }}</h1>`
})
export class Greetings {
@Input() name: string;
}
@Component({
selector: 'mc-app',
template: ngMarkup`
<${Greetings} name="foo"></${Greetings}>
<${Greetings} name="john"></${Greetings}>
`
})
export class AppComponent {}
What’s Next?
Surviving AOT
ngtsc
Getting rid of explicit ngModule
declarations & exports
ngModule
AppModule
ngMarkup
deps