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

Hate aparte, agradezco al autor por compartir este curso, tiene muy buena pinta para actualizar conocimientos. Saludos.

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