HTML template views

What you will build

Render the task count as a small template component.

Before you start

Read components.

angular.getModule('todoApp').component('todoSummary', {
  bindings: { remaining: '<' },
  template: `
    <p>
      <strong>{{ $ctrl.remaining }}</strong>
      tasks remaining
    </p>
  `,
});

<todo-summary remaining="remaining()"></todo-summary>

The binding is the component’s public input. $ctrl is the component controller in its template. Interpolation converts the value to displayed text and keeps that text current.

Templates are a strong default for mostly static HTML, designer-edited markup, and teams that want structure visible without reading JavaScript.

Next step

Learn template expressions or compare typed views.