Skip to content

Instantly share code, notes, and snippets.

@Klerith

Klerith/hero-page.component.html

Last active May 1, 2026 23:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Klerith/b07bfb16b4d6aa27b8ccdbb991d316b2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Klerith/b07bfb16b4d6aa27b8ccdbb991d316b2 to your computer and use it in GitHub Desktop.
Download ZIP
Tarea de conceptos básicos de Angular
Raw
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>
Raw
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">
  1. 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
  1. 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
  1. Crear dos señales con los valores de Ironman y 45 respectivamente.
  name => string  = 'Ironman'
  age => number = 45
  1. Crear un método llamado: getHeroDescription Debe de regresar la concatenación del nombre y la edad.
getHeroDescription
  return `${ name } - ${ age }`;
  1. Implementar el método changeHero, no recibe argumentos y lo cambia a:
name = Spiderman
age = 22
  1. Implementar el método: resetForm, el cual establece
name = Ironman 
age = 45
  1. Implementar el método: chageAge, asignalor al evento click del botón respectivo.
cambia la edad a 60
  1. Extra: Tratar de mostrar el nombre (name) capitalizado en mayúscula sin crear una nueva señal.
@MiguelAngelPapu
Copy link
Copy Markdown

MiguelAngelPapu commented Apr 29, 2025

image image image image

@tgiacaman
Copy link
Copy Markdown

tgiacaman commented May 14, 2025

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

@Yael14KN
Copy link
Copy Markdown

Yael14KN commented May 29, 2025 •
edited
Loading

Gracias por la actividad joven

@MarcoAndresSilva
Copy link
Copy Markdown

MarcoAndresSilva commented May 30, 2025

image

@hardygh1
Copy link
Copy Markdown

hardygh1 commented Jun 2, 2025

image

@Nullises
Copy link
Copy Markdown

Nullises commented Jun 8, 2025 •
edited
Loading

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.

image

Recording.2025-06-08.145655.mp4

@CristianRodr
Copy link
Copy Markdown

CristianRodr commented Jun 14, 2025

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

@TecJACR
Copy link
Copy Markdown

TecJACR commented Jun 14, 2025

imagen
Completado

@GaboDot
Copy link
Copy Markdown

GaboDot commented Jul 4, 2025

Capitalizo con UpperCasePipe.

Hero

UpdatePipe

TemplateUpdatePipe

@BrianOrihuelaP
Copy link
Copy Markdown

BrianOrihuelaP commented Jul 10, 2025

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

image
image

@AarochiA
Copy link
Copy Markdown

AarochiA commented Jul 31, 2025

image

@hiramreyes06
Copy link
Copy Markdown

hiramreyes06 commented Aug 27, 2025

Asi merengues me quedo y funcionando
image

@Fdy7493
Copy link
Copy Markdown

Fdy7493 commented Aug 27, 2025

Wow excelente ahimvamos aprendiendo cada dia mas ¡¡¡

@SergioBumer
Copy link
Copy Markdown

SergioBumer commented Sep 8, 2025

Screenshot 2025-09-07 at 8 33 22 PM Screenshot 2025-09-07 at 8 33 27 PM

Capitalizado con simple javascript

@cehernandezs1983
Copy link
Copy Markdown

cehernandezs1983 commented Sep 12, 2025

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

@leoelpapi
Copy link
Copy Markdown

leoelpapi commented Oct 5, 2025

muy simple, pero chvre

@ramostechx
Copy link
Copy Markdown

ramostechx commented Oct 25, 2025

Proyecto.sin.titulo.mp4

@jquinterom
Copy link
Copy Markdown

jquinterom commented Nov 28, 2025

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

@subdirectoradjunto
Copy link
Copy Markdown

subdirectoradjunto commented Jan 13, 2026

image image image image image

@andrias01
Copy link
Copy Markdown

andrias01 commented Jan 15, 2026

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

@JFCI-7
Copy link
Copy Markdown

JFCI-7 commented Jan 17, 2026

Screenshot 2026-01-16 at 8 25 45 p m

Excelente ejercicio para practicar....

@ClaudiaTrigo
Copy link
Copy Markdown

ClaudiaTrigo commented Feb 2, 2026

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?

@facundo-moran
Copy link
Copy Markdown

facundo-moran commented Feb 2, 2026

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.

@EnderJGV
Copy link
Copy Markdown

EnderJGV commented Mar 1, 2026

📚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.

image

@raulsr92
Copy link
Copy Markdown

raulsr92 commented Mar 18, 2026

La capitalización la hice directamente en el html:

{{ name().toUpperCase() }}

@raulsr92
Copy link
Copy Markdown

raulsr92 commented Mar 19, 2026 •
edited
Loading

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.

@jmlocke1
Copy link
Copy Markdown

jmlocke1 commented Mar 22, 2026

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

@Hachiman999col
Copy link
Copy Markdown

Hachiman999col commented Apr 28, 2026 •
edited
Loading

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);
}
}`
imagen

@alexandernovadev
Copy link
Copy Markdown

alexandernovadev commented Apr 30, 2026

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

@JuanMr7
Copy link
Copy Markdown

JuanMr7 commented May 1, 2026

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment