Blog Post

A New Syntax for Angular Templates

by Younes Jaaidi •
Mar 11, 2019 • 4 minutes

Angular Templates & Time To First Commit

One of my favorite things about Angular is how .

This is really great; especially if you care about Collective Ownership. With some basic HTML knowledge, anyone can contribute to the application’s development: other teams, external web designers… or even the Product Owner! Why not!?

In other words, using HTML templates which is the average time it takes for someone new in your team to make his first change.

Tired of Importing Modules

Now, the thing that I don’t like that much about Angular is how the template is just a simple HTML file. Wait wait wait! Let me try to explain!

In Angular, every component, directive or pipe has some kind of selector that we can use in our components’ templates. When the template is compiled, the implementation is resolved depending on the component’s module imports.

The official and complete explanation is here:

<form [formGroup]="sandwichForm">

export class AppComponent extends Renderable {
  render() {
    return (
      <h1>Hello World!</h1>
    )
  }
}

@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 {}