Modals (or others) with component as content does not trigger ngOnChanges

This is really nice:

const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.name = 'World';

Anyway this does not trigger ngOnChanges() when we set the input “name” but this lifecycle-hook are a crucial feature of Angular components.

Please consider this as a feature request. Also i am looking for a workaround to trigger ngOnChanges manually.

[ip-amity-tarun]

private cd_interval_fn: any; constructor(private cdref: ChangeDetectorRef ) { this.cdref.detach(); const This = this; this.cd_interval_fn = setInterval(() => { This.cdref.detectChanges(); }, 500); } ngOnDestroy() { clearInterval(this.cd_interval_fn); this.cdref.detach(); }

This works for me.

[dstj]

@IAfanasov , your proposed workaround didn’t work for me. ngOnChanges still wouldn’t get triggered. 😕

The only workaround I got working was to wrap the component with ngOnChanges in another component that only forwards the binding.

Like this:

const modalRef = this.modalService.open(ModalContentComponent);
modalRef.componentInstance.name = 'World';

...

@Component({
	selector: 'app-modal-content-modal',
	template: `<app-inner-modal-content [name]="name"></app-inner-modal-content>`,
	changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ModalContentComponent {
	@Input() name: string;
}

@Component({
	selector: 'app-inner-modal-content-modal',
	template: `...`,
	changeDetection: ChangeDetectionStrategy.OnPush,
})
export class InnerModalContentComponent implements OnChanges {
	@Input() name: string;

	ngOnChanges(changes: SimpleChanges) {
		console.log('ngOnChanges triggered');
	}
	...
}

Using Angular v7.2.15 (if ever that changes anything)