Angular Error: NG0100 when a directive use @Input to access ElementRef in ng-container

Question

Minimal error version reproduction: https://stackblitz.com/edit/angular-zlh4ri

explanation:

1. a component(comp1) use <ng-container><span #viewEl></span></ng-container>;
2. another component(comp2) use <span #viewEl></span>;
3. a commom directive try to access the #viewEl in 1/2 component;
4. comp1 raize a error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '[object Object]'. Current value: 'undefined'

How should I fix it? (Allow change structure, but note that the directive should keep a copy of viewEl because I need it

Answer 1

You can make the ViewChild in Comp1 static: true to resolve query results before change detection runs.

@ViewChild('viewEl', { read: ElementRef, static: true })

Have a look at the docs for more information.