Marking Text with i18n

To make text translatable, Angular uses the i18n attribute in templates.

TypeScript (component):

import { Component } from "@angular/core";

@Component({
  selector: "app-greeting",
  standalone: true,
  templateUrl: "./greeting.component.html",
})
export class GreetingComponent {
  name = "Angular";
}

HTML template:

<h1 i18n="@@greetingMessage">Hello, {{ name }}!</h1>
`` Explanation: - `i18n` marks the element for translation. - `@@greetingMessage` is a custom translation ID for reference.