Skip to main content

What is a template in Angular?

In Angular, a template is a component's HTML code that defines the structure and appearance of the interface, as well as how the component's data is displayed to the user.

Main points

  1. HTML + Angular syntax - a template contains regular HTML and special Angular constructs: data bindings ({{ }}), directives (*ngIf, *ngFor, [ngClass]), and events ((click), (input)).
  2. Connection to the component - a template is "connected" to the component class through the template or templateUrl property in the @Component decorator. All the class's properties and methods are available in the template.
  3. Dynamic display - using bindings and directives, a template can react to data changes, show/hide elements, change styles, repeat lists, and so on.
  4. Local display logic - a template controls only the visual part; business logic should stay in the component class.

In other words, a template is the component's interface "map", through which Angular connects the data model to the display.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.