Interpolacion Angular

 Crear un nuevo componente para este ejemplo >> ng g c interpolacion

Ejemplo 1: String

TS:

nombre: string = 'Leonarda Vidal';

HTML: 

<p>Mi nombre es: {{nombre}}</p>

Resultado:

Ejemplo 2: Numerico

TS:

 edad: number = 20;

HTML:

<p>Mi edad es: {{edad}}</p>

Resultado:

Ejemplo 3: Objeto

TS:

 personas = {

    nombre:  'Leonarda Vidal',

    edad: 20

  }

HTML:

<p> Mi nombre es: {{personas.nombre}}</p>

<p> Mi edad es: {{personas.edad}}</p>

Resultado:

Ejemplo 4: Objeto - interface

Clic derecho en app y crear un nuevo archivo 

Llamarlo personas.ts

Al interno se debe exportar la interface:

export interface Personas{

  nombre: string;

  edad: number;

}

TS:

Importacion: import { Personas } from '../personas';

  personas: Personas = {

    nombre:  'Leonarda Vidal',

    edad: 20

  }

HTML:

<p> Mi nombre es: {{personas.nombre}}</p>

<p> Mi edad es: {{personas.edad}}</p>

Resultado:

Ejemplo 5: Operaciones numericas

TS:

  dato1: number = 10;

  dato2: number = 25;

HTML:

<p> El resultado de la operacion numerica es: <b>{{dato1 * dato2}}</b></p>

Resultado:

Ejemplo 6: Metodo

TS:

 getString(): string {

    return 'Hola Mundo!';

  }

HTML:

<p>Resultado del Metodo: <b>{{getString()}}</b></p>

Resultado:

Ejemplo 7: Operador condicional ternario

TS:

  getString(): string {

    return 'Hola Mundo!';

  }

HTML:

<p>Operador Ternario: <b>{{getString() == 'Hola Mundo!'? 'Si' :'No'}}</b></p>

Resultado: