Propriedades da classe do componente no template Angular

Todas as propriedades públicas da classe do componente estarão disponíveis dentro do template do componente. Vamos ver como acessá-las.

Suponha que nossa classe tenha a seguinte propriedade pública:

export class AppComponent {
	public test: string = 'abcde';
}

Vamos exibir o conteúdo da nossa propriedade na renderização. Para isso, precisamos escrever o nome da propriedade dentro de chaves duplas:

<div>
	{{ test }}
</div>

Dada a seguinte renderização:

<ul>
	<li>name: john</li>
	<li>surn: smit</li>
</ul>

Faça com que o nome e sobrenome sejam passados para o template a partir da classe do componente.