Sergio Hidalgo
Apasionado por la tecnología. Ninja Developer, FullStack, Adm Servidores, Profesor de Angular, Node, Phaser, Javascript. sergiohidalgocaceres@gmail.com https://www.facebook.com/groups/607163139705114/
El Ciclo de Vida
Los componentes de Angular tienen 8 estados más un constructor
constructor
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy
Es el primer método que se ejecuta
constructor
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy
Se ejecuta cada vez que hay un cambio en los Inputs
constructor
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy
Se ejecuta una sola vez. Cuando se inicia un componente. Se ejecuta antes que el componente esté registrado en el DOM
constructor
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy
Detecta cualquier cambio que Angular no pueda
constructor
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy
Se ejecuta después que se carga un contenido externo
constructor
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy
Se ejecuta después que Angular revisa el contenido externo cargado
constructor
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy
Se ejecuta luego que el contenido interno ha cargado
constructor
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy
Se ejecuta luego que Angular revisa el contenido interno cargado
constructor
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy
Se ejecuta cuando un componente es eliminado
ng-content
Se usa para agregar contenido externo
Supongamos que el componente "Tarea" tiene contenido externo.
<!-- listado.component.html -->
<app-tarea>
<h1>Contenido externo</h1>
</app-tarea>El contenido externo no será tomado en cuenta por el componente "Tarea" a menos que contenga la directiva "ng-content".
<!-- tarea.component.html -->
<div>
<h1>Component "Tarea"</h1>
<ng-content></ng-content>
</div>@ContentChild
El decorador ContentChild permite hacer referencia a etiquetas existentes dentro de contenido externo.
Supongamos que hacemos referencia a la etiqueta h1 usando #titulo.
<!-- listado.component.html -->
<app-tarea>
<h1 #titulo>Contenido externo</h1>
</app-tarea>Supongamos que hacemos referencia a la etiqueta h1 usando #titulo.
<!-- tarea.component.ts -->
...
export class TareaComponent {
@ContentChild("titulo") tituloComponent: ElementRef
...
}Es un contenido externo, por lo tanto la referencia existirá desde el estado ngAfterContentInit.
<!-- tarea.component.ts -->
...
export class TareaComponent {
@ContentChild("titulo") tituloComponent: ElementRef
...
ngAfterContentInit(){
console.log(this.tituloComponent.nativeElement.textContent)
}
}Tarea 1
- Crear una app que administre al personal de una empresa.
- Cada persona tiene los siguientes datos: Nombre, Sexo, Área.
- Crear un componente "Activos" donde se encuentren las personas que laboran.
- Crear un componente "Cesados" donde se encuentren las personas cesadas.
- Crear un botón "Cesar" para quitar a una persona del componente "Activos" y agregarla al componente "Cesados".
Tarea 1
- Para quitar a una persona de Activos, primero se la debe seleccionar haciendo clic sobre ella y cambiando el color de fondo de ésta para indicar que está seleccionada.
- Presionando nuevamente o seleccionando otra persona, se deselecciona a la persona.
- El botón "Cesar" debe estar habilitado solo si hay una persona seleccionada.
- No se puede seleccionar más de una persona a la vez.
Tarea 1
Activos
Cesados
Cesar
Tarea 2
- Crear una app para registrar equipos digitales (celulares, tabletas, etc.) de una empresa.
- La app debe permitir ingresar los equipos digitales.
- Cada equipo tendrá tres estados posibles: disponible, prestado, en reparación.
- Se debe tener un historial del movimiento del equipo: el equipo se prestó a XYZ, el equipo fue devuelto por ABC, el equipo se envió a reparación, etc.
- Cuando se haga clic en un equipo, se debe visualizar el historial de movimientos.
Tarea 2
app
listado
historial
formulario
equipo
Iequipo
Tarea 2
app
formulario
listado
equipo
historial
(onNuevoEquipo)
(onMostrarHistorial)
(onMovimiento)
[equipos]
[equipo]
[indice]
(onMovimiento)
[historial]
4 Angular: Ciclo de Vida
By Sergio Hidalgo
4 Angular: Ciclo de Vida
El ciclo de vida de Angular
