String interpolation
Contenido del curso
String interpolation
Contenido del curso
Ezequiel Carvajal Oporta
Reinaldo Mendoza
Diego Jurado
Vicente Benavides
Andres López
Jesus Enrique Cabrera Serrao
Sara Acevedo Maya
Victor Hugo Guerrero Cruz
Carlos Gómez
Miguel Angel Reyes Moreno
Pablo Ortiz
Diego Andres Gonzalez Marrugo
Cristian Leonardo Cárdenas Garcia
Camilla Bachna
EDGAR MERCADO GARCIA
Jesús Ignacio García Fernández
Felipe Toro C
Andrea Elizabeth Ortiz Soriano
Andrés Villarraga
Luis Eduardo
Diego Fernando Caviedes Camaho
Neider Barreto Alarcón
José Fabián Beltrán Meza
Daniel Buitrago
Shirley Sanjuan Trespalacios
José Fabián Beltrán Meza
Danny Pacheco
Aaron Paredes Cabrera
Diego Alexander Pérez Otálora
Raquel Torres
Daniel Meza
Juan Carlos Ortiz Huamán
Juan Carlos Pinzón
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.
Excelente definición
Gracias por el resumen!
En mi caso me marcaba error y me tocó ponerlo así acorde a la recomendación del visual studio code src="{{ img }}"
Bro, me salvaste, no me funcionaba y vs code no me indicaba ningún error, ya me iba a arrancar el pelo hasta que vi tu comentario
<img [src]="img" alt="" /> también existe esta manera de hacerlo
les dejo una api de imagenes random de gatitos https://cataas.com/cat
Sin duda promete mucho el curso y más con la explicación tan clara y precisa de Nicolas!! 😃
No me mostraba la imagen y tampoco error, lo solucioné con src="{{ img }}"
Si estás usando una versión superior de Angular a la del curso (en mi caso la v15.1.0) debes poner la variable de la image entre comillas:
<img src="{{ img }}" alt="imagen random"> así no tendrás error :D
Excelente, yo tambien la uso. Estoy comenzando. Estamos en linea
Que raro, estoy usando la 15.2.4 y no necesite hacer eso, me funciona sin las comillas
Si quieres tener tu imagen alojada en línea, te comparto a imgur. https://imgur.com/
La imagen que está utilizando:
gracias por compartir la url
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
<h2>Hola mundo Angular</h2> <h3>{{"hola".repeat(2)}}</h3> 3+3={{3+3}} <h4>Hola, soy {{name}}, tengo {{age}} años</h4> <img src="{{imagen1}}"/>
Angular está brutal y las clases de Nicolas muy buenas, uno de mis profes preferidos junto con Diego deGranda, la forma de hablar y expresión realmente hacen la diferencia.
Cual es la diferencia entre colocar: src={{myImg}} o src="{{myImg}}" ??
la primera parece que no funciona, en la consola al ejecutar esa linea aparece el error:
DOMException: String contains an invalid character GET http://localhost:4200/{{
si usas la opción 2, con las comillas, funciona sin problema, lo acabo de probar con Angular CLI: 14.1.0, el código en una propiedad, debería llevar comillas o usar la otra notación según esté caso:
<img [src]="imgSrc" alt="Image">
Ayuda, al momento de modificar el archivo HTML no se reflejan los cambios en el navegador. Intente borrar la cache pero no pasa nada
intenta siempre abrir en incógnito o apaga el ng serve y vuelve a encenderlo
Una forma puede ser mover el proyecto. En mi caso desde la ruta: /mnt/c/... no me dejó hacerlo, cuendo moví la carpeta al home de linux y levanté el ng serve, ya se reflejaban los cambios.
Me gusta más esta sintaxis:
<p>{{ "Hola mi nombre es: " + name.toUpperCase() + ' y tengo ' + age }}</p>
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.
No me cargaba, y era que tenia espacio entre las llaves y la Variable myimg, quite los espacios y ya veo la imagen <img src={{myimg}} alt=""/>
Curiosamente me pasó igual.
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
<h2>HOLA mundo</h2> <h3>{{'hola mundo'.repeat(5)}} </h3> <p>3+3={{3+3}}</p> <h4>Soy {{name}}, y tengo {{age}}</h4> <img src={{img}} width="100px" height="100px" alt="random image">
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 ({{ }}).
Una pregunta Lo que pasa es que cada vez que guardo el codigo me salta un mensaje a un lado que dice lo siguiente: Failed to save 'app.component.ts': Insufficient permissions. Select 'Retry as Admin' to retry as administrator. y me salen tres opciones que son:
No se como abrir el browser con ng serve para ver el resultado del código. Alguien me puede guiar por favor?
Puedes ejecutar el comando junto al flag -o (guión ó):
ng serve -o
Lo que hará es que, al momento de haber levantado la app, la lanzará a tu navegador para que puedas verla
Intenté colocar una imagen directamente desde internet (tal cual lo haces en el video) pero me aparece un archivo roto, la única manera fue ingresando la imagen dentro de la carpeta assets. ¿A qué creen que se debe esto?
Es que realmente está mal debió ser <img src="{{ image }}" /> o en su defecto y como mejor práctica <img [src]="image" /> que es lo que se ve en la siguiente clase, creo
