Si quieres una imagen para probar tu componente usa este link de imagenes random
https://source.unsplash.com/random
Primeros pasos
Qué es Angular y cómo aprenderlo
Instalación de Angular CLI
Comandos de Angular para correr tu proyecto
Estructura de un proyecto en Angular
Conceptos básicos de TypeScript para usar Angular
Comunicación de datos
String interpolation
Property Binding
Introducción al Event Binding de Angular
Otros eventos que puedes escuchar
Data binding con ngModel
Estructuras de control
Uso de *ngIf
Uso de *ngFor
*ngFor para arrays
Uso de *ngSwitch
Angular Devtools
Estilos
Estilos a la lista de productos
Class and style
NgClass y NgStyle
Crear un formulario
Despedida
Continúa con el Curso de Angular: Componentes y Servicios
Deploy
Despliegue con Firebase Hosting
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
String interpolation
6/21Recursos
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:
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:
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}}"/>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.