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/[email protected]/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.

porque tanto hate para facundo, el texto de la solución no se alcanza a leer y da para que cada quien decida si lo lee o se lo deja ahí a quién si lo quiera leer (yo no lo leí, pero puedo decidir resolverlo y comparar su respuesta con la mía en vez de quejarme de que alguien compartío su punto de vista del tema?

También te estás quejando de los que comparten su punto de vista genio, el problema es que esto es una publicación para definir una actividad, al compartir la solución en un comentario solo demuestras que eres un pretencioso. Al menos yo lo que hice fue decirle que es un completo imbécil (porque claramente el pobre no lo sabe).

porque tanto hate para facundo, el texto de la solución no se alcanza a leer y da para que cada quien decida si lo lee o se lo deja ahí a quién si lo quiera leer (yo no lo leí, pero puedo decidir resolverlo y comparar su respuesta con la mía en vez de quejarme de que alguien compartío su punto de vista del tema?

También te estás quejando de los que comparten su punto de vista genio, el problema es que esto es una publicación para definir una actividad, al compartir la solución en un comentario solo demuestras que eres un pretencioso. Al menos yo lo que hice fue decirle que es un completo imbécil (porque claramente el pobre no lo sabe).

Fíjate en la diferencia entre como comunica su punto Wilfredo Guerra y después ve como el único aquí que parece tener la necesidad de insultar a todos eres tú. Vaya ánimos de aprender que vas por ahí tirando insultos. Ni hablar.

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