String interpolation

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.

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

Sin duda promete mucho el curso y más con la explicación tan clara y precisa de Nicolas!! 😃

les dejo una api de imagenes random de gatitos
https://cataas.com/cat

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 😄

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

La imagen que está utilizando:

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

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}}"/>

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.

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=""/>

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">

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 ({{ }}).

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

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"

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

Platzinautas! Les dejo un enlace con **extensiones ** que puede ser de gran ayuda para su experiencia con angular 🤓
https://medium.com/@sasidharansd/top-10-must-have-vscode-extensions-for-angular-developers-in-2022-5a76edfdeeba

La interpolación en HTML es una técnica que permite mostrar dinámicamente valores de variables en un documento HTML. Esto es útil cuando se quiere mostrar información que cambia con el tiempo, como el contenido de una base de datos o el resultado de una operación matemática.

Para realizar la interpolación en HTML, se pueden utilizar las expresiones delimitadas por dobles llaves ({{ }}). Por ejemplo, si se quiere mostrar el valor de una variable llamada “nombre” en una página web, se puede usar la siguiente etiqueta:

<p>Hola, mi nombre es {{ nombre }}.</p>
Cuando se carga la página en un navegador, el valor de la variable “nombre” se interpoló en el lugar adecuado y se mostró en la página.

Es importante tener en cuenta que la interpolación en HTML no es lo mismo que la interpolación en lenguajes de programación. En lenguajes de programación, la interpolación implica insertar valores de variables directamente en una cadena de texto, mientras que en HTML solo se puede mostrar el valor de una variable en un lugar específico de la página.

Si no te funcional el STRING INTERPOLATION debes inicializar el proyecto “ng serve” desde Visual Studio Code

Otra web que te permite usar imágenes aleatorias

https://picsum.photos/

Muy impresionante, me esta gustando Angular

✅

Utilizando los conocimientos aprendidos de string interpolation!

Que es el string interpolation?

El string interpolation nos ayuda a poner variables de un componente en el código en una estructura HTML.

• Esto se hace por medio de los brackets {{}} quienes le indican a Angular que se va a poner código

Y bueno pero de donde adquiere esas variables?

Angular divide la estructura de un componente por medio de una lógica de negocio donde cada parte tiene su tarea especifica

• En el TS del componente se encuentra una clase la cual es configurada para-Angular por medio de un decorador denotado por medio del símbolo @

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

@Component({ // **👈 Decorador**
  selector: 'app-root', // **👈 Indica como se va invocar este componente**
  templateUrl: './app.component.html',// **👈 indica el template de html al que se refiere**
  styleUrls: ['./app.component.scss']// **👈 indica la hoja de estilos**
})
export class AppComponent {// **👈 la clase en si con algunas variables definidcas**
  public age: number  = 20;// **👈 si se requiere acceder directamente a la variable deben ser publicas**
  public name:string = "Carmelia";
  public university:string = "UMNG"
}

Una forma de comprender mejor como es la comunicación

todos los cursos los he dejado empezados por que tienen mucha paja, en este curso de angular se la volaron esta buenisimo y es adictivo no me puedo separar de mi compu.

String interpolation en mis palabras, si encierro lo que quiero que se vea en la pantalla entre cuatro llaves, dos a cada lado esto me permite jugar con el valor que escribi, hacer operaciones o usarlo mas adelante de una manera facil

Para la fecha hay que usar esta sintaxis:

<img [src]="img" alt="image">

Mis ejercicios de la clase N° 6 💚

name: string = 'Example';
age: number = 21;
img: string: 'Example';

<h1>Hi my name is {{ name }} and I´m {{age}} years old</h1>

<h1>Hola Lucy</h1>

<h2>Hola, soy {{ name }} y tengo {{age}} años, actualmente soy {{master}} .</h2>
<h2>mi comida favorita es el {{eat}}, te comento que tengo una hermosa esposa que se llama {{wife}}
y una pequeña hija preciosa la cual se llama {{daughter}}.
</h2>
<img src="{{ img }}" alt=“image”>

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.scss’]
})
export class AppComponent {
name = ‘Bryan’;
age = 33;
master = ‘developer’;
eat = ‘asado’;
hobbie = ‘programar’;
wife = ‘lucy’;
daughter = ‘Elihane’;
img = ‘https://picsum.photos/536/354’;

}

les dejo una api de imagenes random de gatitos
https://cataas.com/cat

String interpolation

La interpolación de cadenas es una característica de Angular que permite insertar una expresión en medio de una cadena de texto. Se utiliza el símbolo {{ }} para encerrar la expresión que se desea insertar.

<p>Bienvenido, {{nombre}}!</p>

En este ejemplo, nombre es una variable que se define en el componente de Angular que corresponde a la vista. La expresión {{nombre}} se reemplaza con el valor de la variable nombre cada vez que se actualiza.

La interpolación de cadenas es una forma fácil y rápida de mostrar dinámicamente datos en una vista. Es muy útil cuando se desea mostrar valores que cambian dinámicamente, como el nombre de usuario o el resultado de una operación matemática.

nico es mi profesor favorito!

cuando se crean mas componentes, cual es la mejor manera para interpolarlos con el master?

‘https://picsum.photos/400/200’

• Probé con usarlo con protected, y no hay ningún problema hasta el momento:

export class AppComponent {
    protected name = 'Remmian';
}

En realidad, existen 3 tipos de modos de protección de variables (Desde clases)

• Comodín, también puedes usar ‘readonly’, pero no es recomendable usarlo.

export class AppComponent {
    readonly title = 'store';
    protected name = 'Remmian';
    private age = 20;
}

Para quienes vienen de Laravel, este comportamiento es similar a las plantillas blade, donde desde el controlador se le pasan los datos a la vista y esta los representa por interpolación.

La api de unsplash no funciona ya, ahora en mi caso utilize la API de Lorem Picsum

https://picsum.photos/400/600

Lo que si es que recuerdo que como llevar valores desde typescript a una vista en html. Es fascinante.

Mi resultado de la práctica de esta clase:

a mi no me cargaba la imagen porque dejaba espacios entre las llaves y la variable

<img src={{img}}  alt="image">

asi fue como lo solucione

Ya me está gustando Angular 😃

Básicamente la interpolación es representar los datos que están el archivo .ts del componente en el .html
Dato importante, podemos interpolar casi cualquier cosa menos objetos.
Si interpolamos arrays, angular interpola cada elemento del array, separándolo por comas.

###Interpolación

• {{ dato }}

A mi no me mostraba la imagen asi que tuve que dejarlo de la siguinete forma

<img src="{{ imagen }}" alt="">

En mi caso también me toco utilizar src="{{ img }}", ya que sin las comillas dobles no mostraba nada.

Cuando ponia la etiqueta <img src={{ img }} alt="">, no me cargaba la imagen, pero le agregue comillas al src y me cargo.
<img src="{{ img }}" alt="">

Alguein sabe pro que la diferencia con el ejercicio resuelto por el profesor?

06 STRING INTERPOLATION

Es la forma como desde la logica (typescript), podemos pasar datos a renderizar en nuestra vista. Al final string interpolation te permite mediante las llaves dobles {{ }} pudes implemtnar codigo typescript en la vista, por ejemplo:

    {{ 1 + 1 }}
    {{ myVar }}
    {{ myFunction() }}

Ejemplos de interpolacion:

Nos dirigmos a nuestro archivo de logica, app.component.ts y creamos tres propiedades en la clase AppComponent:

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

// Decorador es lo que le dice a angular como debe comportarse la clase y dice a que template esta ligado y el archivo de estilos
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html', // Vista en la que se refleja la interpolacion
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  //Estas variables deben tener acceso publico para que pueda ser interpoladas
  public name = 'German';  // Variable de acceso publico llamada 'name'
  public age = 18; // Variable de acceso publico llamada 'age'
  public imageUrl = 'https://source.unsplash.com/random';
}

NOTA: Ya que se usa el paradigma de POO, este tipo de variables por concepto deberian ser de acceso protected y no tendria ningun error con la interpolacion.

A este punto, habiendo definido la propiedades (name y age), angular nos permite pasar el valor de dichas variables definida en el app.component.ts por algo que se conoce como la interpolacion. El decorador le indica a angular en que vista (app.component.html) va a reflejar los valores de las propiedades y de esta forma podemos usar los mismos nombres entre las llaves dobles en la vista. Algo asi en el archivo 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 }} años</h3>

<img src="{{ imageUrl }}" width="600" alt="imagen">
&nbsp;

<!-- 
Esta es otra forma de interpolar variables de forma mas limpia en un atriburo html
[atributo]="variable" 
De esta forma no usamos las llaves {{}} dentro de el valor del atributo
-->
<img [src]="imageUrl" width="600" alt="imagen">

Nico es un excelente profesor …

Por qué razon no me funciona el interpolation si acabo de crear el proyecto y hago examente lo mismo.

Ejemplo el <h2>{{ ‘HOLA MUNDO’.repeat(5) }}</h2>

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

https://www.w3schools.com/howto/img_avatar.png

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.

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"
/>