A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

String interpolation

6/21
Recursos

String interpolation聽es la manera de enviar datos desde nuestro componente hacia la vista. Utilizando el doble s铆mbolo de llaves聽{{ }}, o tambi茅n conocidos como brackets, puedes imprimir el valor de una variable, realizar operaciones matem谩ticas o hacer el llamado a una funci贸n dentro del c贸digo HTML.

<h1>{{ 'Hola Platzi' }}</h1>
<h2>1 + 1 = {{ 1 + 1 }}</h2>
<h3>{{ myFunction(); }}</h3>


Divisi贸n de responsabilidad

Un componente de Angular se divide en tres archivos: uno para el c贸digo聽TypeScript, otro para el c贸digo聽HTML聽y uno m谩s para el c贸digo聽CSS.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Hola soy Platzi';
}

Angular usa el concepto de聽decoradores聽para modificar el comportamiento de las clases. La clase聽AppComponent聽implementa el decorador聽@Component()聽para indicarle a Angular que esta clase ser谩 un componente. Dentro de este decorador, puedes observar el selector del componente (un nombre para el mismo), el template HTML y la hoja de estilos que usar谩.

Finalmente, dentro de la clase puedes declarar tus propiedades y m茅todos como en cualquier clase de la programaci贸n orientada a objetos. Tenemos una propiedad llamada聽title聽que es del tipo string. Podemos mostrar el valor de esta variable en el HTML con una interpolaci贸n:

<p>{{ title }}</p>


Es importante que tengas en cuenta la visibilidad de los atributos y m茅todos de una clase. Si estos llegaran a ser聽private, no podr谩s usarlo en el HTML Las variables deben ser p煤blicas para poder ser compartidas al template.

...
export class AppComponent {
  // Variable privada, no puede utilizarse en un interpolaci贸n
  private title = 'Hola! soy una variable privada';
}

Aporte creado por: Kevin Fiorentino.

Aportes 22

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Si quieres una imagen para probar tu componente usa este link de imagenes random

https://source.unsplash.com/random

String interpolation: La forma en la que desde la l贸gica de nuestro typeScript podemos pasar datos a renderizar a nuestro template(html). En otras palabras, con las {{ }} podemos usar typeScript en html.

Sin duda promete mucho el curso y m谩s con la explicaci贸n tan clara y precisa de Nicolas!! 馃槂

Si quieres tener tu imagen alojada en l铆nea, te comparto a imgur.
https://imgur.com/

STRING INTERPOLATION

La forma en que nosotros desde la l贸gica podemos pasar datos a renderizar a nuestro template.
Para esto se utiliza dobles llaves ({{ }}).

No me mostraba la imagen y tampoco error, lo solucion茅 con src="{{ img }}"

En mi caso me marcaba error y me toc贸 ponerlo as铆 acorde a la recomendaci贸n del visual studio code
src="{{ img }}"

alguien me puede por favor explicar porque al abrir el html me aparece las llaves y no los datos de la variable?

app.components.ts = Utilizamos un decorador que le dice a Angular como debe comportarse la clase, e inclusive dice donde ser谩 visible nuestro html y scss.

En la clase podemos incluir todas las variables q necesitemos, en un futuro ser谩 nuestra conexi贸n a una db.

Me encanto esta clase, abre las posibilidades a muchas cosa sinteresantes por hacer.

La forma que nosotros desde la LOGICA, es decir, nuestro TYPESCRIPT, podemos pasar datos a renderizar a nuestro template, en este caso, nuestra vistas.

Es la forma en la que con {{}} podemos interpretar unas funciones con una expresion dentro de ellas y obtener el resultado.

Me encanto la forma en la que ts ordena la logica y la vista, muy elegante

con

templateUrl: './app.component.html鈥
asociamos el componente con el c贸digo ts a la template html correspondiente, lo que nos permite llamar las variables que creemos y mostrarlas en la plantilla con string interpolation (siempre y cuando sea publica)

las variables por defecto son publicas a no ser que se les declare como privadas, lo que impicar铆a que el componente no podr铆a acceder a esta variable.

private name = "umpalumpa"

El uso de String Interpolation es similar al usado por otros Frameworks.

Otra web que te permite usar im谩genes aleatorias

https://picsum.photos/
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  name: string = 'Juan Carlos';
  age: number = 49;
  img: string = 'https://source.unsplash.com/random';
}

El String es la forma de renderizar en el template y se puede aplicar desarrollando desde la logica y deben ser publicas.

La imagen que est谩 utilizando:

img = 鈥https://www.w3schools.com/howto/img_avatar.png鈥;

mi archivo typescript

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  name:string="Danny";
  age:number=22;
  img:string='https://source.unsplash.com/random';
}

mi archivo html

<h1>HOLA mundo</h1>
<h2>{{'hola mundo'.repeat(5)}} </h2>
<p>3+3={{3+3}}</p>
<h3>Soy {{name}}, y tengo {{age}}</h3>
<img src={{img}} width="100px" height="100px" alt="random image">

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  name: string = 'Roberto';
  age: number = 23;
  img: string = 'https://source.unsplash.com/random';
}


app.component.html

<h1>Hola Mundo</h1>
<h2>{{ 'Hola Mundo'.repeat(5) }}</h2>
<p>3 + 3 = {{ 3 + 3 }}</p>
<h3>Hola, soy {{ name }} y tengo {{ age }}</h3>
<img src="{{ img }}" alt="{{ img }}"
     width="300"
    height="300"
/>

app.componet.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  name="Nacho"
  age=24
  imagen1="https://img2.freepng.es/20180409/pqq/kisspng-nachos-mexican-cuisine-salsa-taco-pico-de-gallo-lg-5acc189d947535.2473737815233250856081.jpg"
}

app.component.html

<h1>Hola mundo Angular</h1>
<h2>{{"hola".repeat(2)}}</h2>
3+3={{3+3}}
<h3>Hola, soy {{name}}, tengo {{age}} a帽os</h3>
<img src="{{imagen1}}"/>