Tarea de conceptos básicos de Angular

hero-page.component.html

<h1>{{ name() }}</h1>

<dl>
  <td>Nombre:</td>
  <dd>{{ name() }}</dd>

  <td>Edad:</td>
  <dd>{{ age() }}</dd>

  <td>Método:</td>
  <dd>{{ getHeroDescription() }}</dd>

  <td>Capitalizado:</td>
  <!-- ! Intentar  -->
  <!-- <dd> {{ 'Mostrar nombre TODO EN MAYÚSCULAS' }} </dd> -->
</dl>

<button (click)="changeHero()" class="btn btn-primary mx-2">
  Cambiar nombre
</button>

<button class="btn btn-primary">Cambiar edad</button>

<button (click)="resetForm()" class="btn btn-primary mx-2">Reset</button>

tarea-01.md

Tarea:

Practicar lo aprendido hasta el momento

1. Colocar esta importación del Bootstrap en el index.html

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity_no="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

2. Crear el componente de Angular correspondiente para este archivo: src/app/pages/hero/hero-page.component.html

• El contenido del HTML está en este GIST también

3. Crear la ruta respectiva en el app.routes.ts

  {
    path: '/hero',
    component: HeroPageComponent
  }

* Recuerden importar el componente en el app.routes.ts
* Navegar al URL: https://localhost:4200/hero

3. Crear dos señales con los valores de Ironman y 45 respectivamente.

  name => string  = 'Ironman'
  age => number = 45

4. Crear un método llamado: getHeroDescription Debe de regresar la concatenación del nombre y la edad.

getHeroDescription
  return `${ name } - ${ age }`;

5. Implementar el método changeHero, no recibe argumentos y lo cambia a:

name = Spiderman
age = 22

6. Implementar el método: resetForm, el cual establece

name = Ironman 
age = 45

7. Implementar el método: chageAge, asignalor al evento click del botón respectivo.

cambia la edad a 60

8. Extra: Tratar de mostrar el nombre (name) capitalizado en mayúscula sin crear una nueva señal.

Gracias Fernando, la tarea fue bastante interesante para reforzas los temas de Signals.

Gracias por la actividad joven

Bastante interesante la tarea. La hice con Angular 20. Para los que se molestan, la verdad es una tarea bastante simple, y de paso Fernando Herrera les hace el 50% explicandoles todo y dandoles el código del HTML, esto es apenas es el principio. No deberían molestarse si otros ponen sus códigos, cada quien la hace a su manera, unos usan toLocalUppercase() yo use el pipe uppercase por ejemplo.

Recording.2025-06-08.145655.mp4

Creo que la idea de las tareas es resolverlas para generar ese aprendizaje del lenguaje, si alguien colocando la imagen con la solución, no tiene gracia.

tienes razon

Completado

Capitalizo con UpperCasePipe.

Como me gusta la manera que explica el buen Fer Herrera, desde hace un año todos mis cursos los veo en dev talles!

Asi merengues me quedo y funcionando

Wow excelente ahimvamos aprendiendo cada dia mas ¡¡¡

Capitalizado con simple javascript

Super! gracias Fernando por todo el empeño por compartir tus conocimientos, con este tipo de ejercicios se afianzan los conocimientos!
Gracias totales!!

muy simple, pero chvre

Proyecto.sin.titulo.mp4

Realicé la tarea, pero como iba copiando y pegando al copiar la url "https://localhost:4200/hero" que está en la documentación no funciona ya que es https, en mi caso elimino la 's' y ya.

Correcto:
http://localhost:4200/hero

Muy buena forma de practicar en Angular, y lo mejor que deja cosas al aire para intentar resolverlas.
buen trabajo FER - DEV TALLES 💯

Excelente ejercicio para practicar....

Si el punto 8 lo hemos hecho definiendo una clase en el html:

Capitalizado:

{{ name() }}

Y desde el css accediendo a esta class lo hemos definido:
.capitalizado {
text-transform: uppercase;
}

Es buena practica? o es mejor defnir el metodo desde el propio html?

Si el punto 8 lo hemos hecho definiendo una clase en el html:

Capitalizado:
{{ name() }}
Y desde el css accediendo a esta class lo hemos definido: .capitalizado { text-transform: uppercase; }

Es buena practica? o es mejor defnir el metodo desde el propio html?

Creo que en Angular la mejor practica siempre es tener los tres archivos separados. component.html, component.css y component.ts. Recorda tambien siempre centralizar los datos en servicios.

📚Implementación realizada.

👨‍💻Código dentro de componente.

export class HeroPageComponent{
  name = signal('Ironman');
  age = signal(45);

  getHeroDescription(){
    return `${this.name()} - ${this.age()}`
  }

  changeHero(){
      this.name.update(() => 'Spiderman');
      this.age.update(() => 22);
  }

  resetForm(){
    this.name.set('Ironman');
    this.age.set(45);
  }

  changeAgeHero(){
    this.age.update((current) => current + 1);
  }

  nameCapitalized(){
    return this.name().toUpperCase();
  }
}

✅Resultado final.

La capitalización la hice directamente en el html:

{{ name().toUpperCase() }}

Opción 2 para la capitalización del nombre --> usando computed signals:

nameCapitalized = computed(()=>{ const name = this.name() return name.toUpperCase() })

📢Diferencias:

Opción 1: TRANSFORACIÓN DIRECTA EN EL TEMPLATE

• Cada vez que Angular renderiza, ejecuta name().toUpperCase().
• Es simple y funciona bien para transformaciones pequeñas.
• Pero si la lógica fuera más compleja (ej. cálculos costosos), se repetiría en cada render.

Opción 2: COMPUTED SIGNAL

• Se define una derivación reactiva: nameCapitalized depende de name.
• Angular recalcula nameCapitalized solo cuando name cambia, no en cada render.
• Es más eficiente y mantiene la lógica en el TypeScript, no en el template.
• Facilita reutilizar el valor en varios lugares sin repetir la transformación.

Si el punto 8 lo hemos hecho definiendo una clase en el html:
Capitalizado:
{{ name() }}

Y desde el css accediendo a esta class lo hemos definido: .capitalizado { text-transform: uppercase; }

Es buena practica? o es mejor defnir el metodo desde el propio html?

Es una práctica tan buena como otra cualquiera. No hay una forma única de definir una funcionalidad, y el código CSS es una de las tecnologías básicas de la web, por lo que es totalmente válido usarlo.
Otra cosa es que quieras practicar características exclusivas de Angular, en este caso, capitalizar con CSS no es exclusivo de Angular, y sería mejor usar pipes o señales computadas, que sí son exclusivos de Angular

Angular 21
`import { Component, signal } from '@angular/core';

@component({
selector: 'counter-c',

template: `

{{ name() }}

<dl>
  <td>Nombre:</td>
  <dd>{{ name() }}</dd>

  <td>Edad:</td>
  <dd>{{ age() }}</dd>

  <td>Método:</td>
  <dd>{{ getHeroDescription() }}</dd>

  <td>Capitalizado: {{ name().toUpperCase() }}</td>
</dl>

<button (click)="changeHero()" class="btn btn-primary mx-2">Cambiar nombre</button>

<button class="btn btn-primary" (click)="changeAge(2)">Cambiar edad</button>

<button (click)="resetForm()" class="btn btn-primary mx-2">Reset</button>`,

styles: button { padding: 5px; margin: 10px; cursor: pointer; },
})
export class Hero {
protected readonly name = signal('Spiderman');
protected readonly age = signal(30);

getHeroDescription() {
return ${this.name()} - ${this.age()};
}

changeHero() {
this.name.set('Spiderman');
this.age.set(22);
}

resetForm() {
this.name.set('Ironman');
this.age.set(45);
}

changeAge(a: number) {
this.age.update((v) => v + a);
}
}`

Todos subiendo sus tareas , ajjajaaj ya veremos cuando estemos en seccion 21, jajajajajajajajajja xd xd

Hola, estoy tomando este curso de Angular, muchas gracias.