Este tema es bien interesante, para mostrar como funciona se va a mostrar en los ejemplos el uso de dos lifecycle hooks(ciclos de vida de un componente).
Cuando se asigna un valor por defecto a un @Input este valor se asigna cuando no se inyecta el valor desde otro componente.
Ahora vamos a ver algun codigo que muestre esta situacion en accion.
@Component({
selector: 'componenteEjemplo',
})
export class ComponenteEjemplo implements OnChanges, OnInit {
@Input() propiedad: boolean = false;
ngOnChanges(changes) {
console.log('Cambio en el valor', changes.propiedad.currentValue, changes.propiedad.previousValue);
}
ngOnInit() {
console.log('Valor al inicializar', this.propiedad);
}
}
Escenario 1:
Componente es usado en el html sin el uso de la propiedad.
<componente-ejemplo></componente-ejemplo>
Resultado: En la consola veremos Valor al inicializar: false
Esto dice que onChange no fue activado. Init fue activado y se obtuvo el resultado esperado.
Escenario 2:
Componente usado inyectando el valor en el html.
<componente-ejemplo [propiedad]="true"></componente-ejemplo>
Resultado:
En la consola vamos a ver algo asi,
Cambio en el valor:true, undefined.
Valor al inicializar: true
Aca vamos a ver un comportamiento distinto y es que el primer evento en ejecutar es onChange, y esto agrega el valor true y el valor previo es undefined. Solo despues que esta asignacion sucede Init es ejecutado y obtiene el valor true asignado en el evento onChange.
Espero esta solucion le ayude.