Angular 2 - Plantillas

En el capítulo de Componentes, ya hemos visto un ejemplo de la siguiente plantilla.

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

Esto se conoce como inline template. Hay otras formas de definir una plantilla y eso se puede hacer a través del comando templateURL. La forma más sencilla de utilizar esto en el componente es la siguiente.

Sintaxis

templateURL:
viewname.component.html

Parámetros

• viewname - Este es el nombre del módulo del componente de la aplicación.

Después del nombre de la vista, el componente debe agregarse al nombre del archivo.

Los siguientes son los pasos para definir una plantilla en línea.

Step 1- Cree un archivo llamado app.component.html. Este contendrá el código html de la vista.

Step 2 - Agregue el siguiente código en el archivo creado anteriormente.

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

Esto define una etiqueta div simple y hace referencia a la propiedad appTitle de la clase app.component.

Step 3 - En el archivo app.component.ts, agregue el siguiente código.

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

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

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

A partir del código anterior, el único cambio que se puede notar es en templateURL, que proporciona el enlace al archivo app.component.html que se encuentra en la carpeta de la aplicación.

Step 4 - Ejecute el código en el navegador, obtendrá el siguiente resultado.

En la salida, se puede ver que el archivo de plantilla (app.component.html) se llama en consecuencia.