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.

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.

Listo!

yo lo realice sin generar aun pipe como veo que muchos lo hicieron: