Propiedades de la clase del componente en la plantilla de Angular

Todas las propiedades públicas de la clase del componente estarán disponibles dentro de la plantilla del componente. Veamos cómo acceder a ellas.

Supongamos que en nuestra clase tenemos la siguiente propiedad pública:

app/app.component.tsexport class AppComponent {
  public test: string = 'abcde';
}

Mostremos el contenido de nuestra propiedad en el markup. Para hacer esto, debemos escribir el nombre de la propiedad dentro de llaves dobles:

app/app.component.html<div>
  {{ test }}
</div>

app/app.component.html<ul>
  <li>name: john</li>
  <li>surn: smit</li>
</ul>