Angular 2 - Modelos

No capítulo sobre Componentes, já vimos um exemplo do seguinte modelo.

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

Isso é conhecido como um inline template. Existem outras maneiras de definir um modelo e isso pode ser feito por meio do comando templateURL. A maneira mais simples de usar isso no componente é a seguinte.

Sintaxe

templateURL:
viewname.component.html

Parâmetros

  • viewname - Este é o nome do módulo do componente do aplicativo.

Após o viewname, o componente precisa ser adicionado ao nome do arquivo.

A seguir estão as etapas para definir um modelo embutido.

Step 1- Crie um arquivo chamado app.component.html. Isso conterá o código html da visualização.

Step 2 - Adicione o seguinte código no arquivo criado acima.

<div>{{appTitle}} Tutorialspoint </div>

Isso define uma tag div simples e faz referência à propriedade appTitle da classe app.component.

Step 3 - No arquivo app.component.ts, adicione o seguinte código.

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'  
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

No código acima, a única alteração que pode ser observada é do templateURL, que fornece o link para o arquivo app.component.html que está localizado na pasta do aplicativo.

Step 4 - Execute o código no navegador, você obterá a seguinte saída.

A partir da saída, pode-se ver que o arquivo de modelo (app.component.html) está sendo chamado de acordo.