angular/aio/content/tutorial/toh-pt1.md

El editor de Héroe

Se ha agregado un título básico a la aplicación. Luego crea un nuevo componente para mostrar la información del héroe, Coloca el componente en el (app shell) de la aplicación.

Para ver la aplicación de ejemplo que describe esta página, consulta el .

Crear un componente de héroes

Usa la CLI angular para generar un nuevo componente llamado heroes.

ng generate component heroes

CLI crea una nueva carpeta llamada src/app/heroes/, y genera tres archivos sobre HeroesComponent junto un archivo de prueba.

El archivo de la clase HeroesComponent es el siguiente.

Siempre Importa el símbolo Component de la biblioteca pricipal de Angular, y realiza la anotación a la clase del component con @Component.

@Component es una decoradoro que especifica metadatos Angular para un componente.

La CLI generó 3 propiedades de metadatos:

1. selector— El selector de elementos CSS para el componente
2. templateUrl— La ubicación del archivo plantilla para el componente
3. styleUrls— La ubicación de los estilos CSS privados del componente.

{@a selector}

El Selector de elementos CSS 'app-heroes', coincide con el nombre del elemento HTML que identifica este componente en el componente padre Plantillas.

El ngOnInit() es un gancho de ciclo de vida ("lifecycle hook") . Angular llama a ngOnInit() inmediatamente después de crear el componente. Adecuado para poner la lógica de inicialización.

Siempre exporta la clase de componente, por lo que siempre puede importarla en otro lugar, como un AppModule.

Agrega la propiedad hero

Agrega una propiedad hero al HeroesComponent para un héroe llamado "Windstorm".

Mostrar el héroe

Abre el archivo de plantilla heroes.component.html. Elimina el texto predeterminado generado por CLI angular, Reemplaza con un enlace de datos a la nueva propiedad hero.

Mostrar la vista HeroesComponent

Para ver el HeroesComponent, debe agregarlo a las Plantillas en el AppComponent del shell de tu aplicación.

Recuerda que app-heroes es el selector de elemento del HeroesComponent. Entonces, en el archivo Plantillas de AppComponent, agrega el elemento <app-heroes> directamente debajo del título.

Si el comando CLI ng serve todavía se está ejecutando, El navegador se actualiza para mostrar el título de la aplicación y el nombre del héroe.

Crear interfaz de héroe

Un héroe es más que un nombre.

Crea una interfaz Hero en su propio archivo en la carpeta src/app. Dale una propiedad id y una propiedad name.

Regresa a la clase HeroesComponent e importe la interfaz Hero.

Refactoriza la propiedad de héroe del componente para que sea del tipo 'Héroe'. Inicialízalo con un id de 1 y un nombre de Windstorm.

El archivo de clase revisado HeroesComponent se ve así:

Cambió el héroe de texto a un objeto, lo que provocó que la página se mostrara incorrectamente.

Mostrar objeto de héroe

Actualiza los enlaces de Plantillas para anunciar el nombre del héroe, Muestra tanto el id como el name con un diseño detallado como este:

El navegador se actualiza para mostrar la información del héroe.

Formatea con UppercasePipe

Modifica el enlace para hero.name de esta manera:

El navegador se actualizará para mostrar el nombre del héroe en mayúsculas.

En el enlace de interpolación, la palabra mayúscula inmediatamente después del operador pipe (|) es Inicie el 'UppercasePipe' incorporado.

pipe ("pipe") Es adecuado para formatear cadenas, importes monetarios, fechas y otros datos de visualización. Angular viene con múltiples pipes incorporadas, y puede crear las suyas propias.

Editar el héroe

El usuario debe poder editar el nombre del héroe en el cuadro de texto <input>.

En el cuadro de texto, la propiedad name del héroe se muestra _, La propiedad se actualiza según los tipos de usuario. Esto es de la clase de componente a screen, Y significa el flujo de datos desde la pantalla a la clase de componente.

Para automatizar ese flujo de datos, configure un enlace de datos bidireccional entre el elemento de formulario <input> y la propiedad hero.name.

Enlace de datos bidireccional

Refactorizando el área de detalle de las Plantas HeroesComponent se ve así:

[(ngModel)] Es la sintaxis de enlace de datos bidireccional de Angular.

Esto vinculará la propiedad hero.name al cuadro de texto HTML, por lo que Puede pasar datos en ambas direcciones desde la propiedad hero.name al cuadro de texto y desde el cuadro de texto a la propiedad hero.name.

FormsModule No encontrado

Observa que la aplicación dejó de funcionar cuando agregué el [(ngModel)].

Para ver el error, abre las herramientas de desarrollo de su navegador, Busca mensajes como el siguiente en la consola,

Errores de análisis de plantilla: No se puede vincular a 'nGModelo' ya que no es una propiedad conocida de 'entrada'.

ngModel Es una directiva angular válida pero no está disponible por defecto.

Pertenece al FormsModule opcional y debe optar por ese módulo para usarlo.

AppModule

En Angular, cómo encajan las partes de la aplicación, Necesita saber qué otros archivos y bibliotecas necesita su aplicación. Esta información se llama metadata.

Algunos de los metadatos se encuentran en el decorador @Component que agregó a su clase de componentes. Otros metadatos importantes son@NgModuleEstá en el decorador.

El decorador más importante @NgModule anota la clase AppModule de nivel superior.

Angular CLI creó la clase AppModule en src/app/app.module.ts al crear el proyecto. Ahora opta por el FormsModule.

Importar FormsModule

Abre AppModule (app.module.ts) e importe el símbolo FormsModule desde la biblioteca @angular/forms.

A continuación, agregue el FormsModule a el arreglo imports de los metadatos @ NgModule. Esta matriz contiene una lista de módulos externos que requiere su aplicación.

La aplicación debería funcionar nuevamente cuando se actualice el navegador. Puedes editar el nombre del héroe y ver los cambios reflejados inmediatamente en el <h2> arriba del cuadro de texto.

Declarar HeroesComponent

Todos los componentes deben declararse con exactamente uno NgModule.

No has declarado HeroesComponent`. Entonces, ¿por qué funcionó la aplicación?

La aplicación funcionó porque Angular CLI declaró el componente en el AppModule cuando generó el HeroesComponent.

Abra src/app/app.module.ts y encuentre el HeroesComponent importado cerca de la parte superior.

HeroesComponent se declara en la matriz@NgModule.declarations.

AppModule declara los componentes de aplicación AppComponent y HeroesComponent.

Revisión del código final

Los archivos de código descritos en esta página son:

## Resumen

• Creo un segundo HeroesComponent usando el CLI.
• Agregó HeroesComponent al shell de AppComponent y lo mostró.
• Aplico 'UppercasePipe' para formatear el nombre.
• Utilizo el enlace de datos bidireccional en la directiva ngModel.
• Aprendío sobre AppModule.
• Importó FormsModule en AppModule para reconocer y aplicar la directiva Angular ngModel.
• Aprendío la importancia de declarar un componente en un AppModule y me di cuenta de que la CLI está haciendo esa declaración por usted.