Implement Structural Directive Data Binding with Context in Angular

Angular^6.0.0

Share this video with your friends

Just like in *ngFor, you're able to pass in data into your own structural directives. This is done by declaring the variable using a let statement then passing context into the createEmbeddedView call.

felikf

~ 6 years ago

Hi John, thanks for the super lessons, I like your very clean approach :)

I would like to understand in more detail how the refactor of the ngAfterViewInit into the setter removes the error with change detection. Whats the flow here that causes the error and why the setter removes it?

Thanks in advance Regards Felix

Ningze

~ 4 years ago

Hi felikf, To answer your question, without refactoring, the {{ message }} has been changed in ngAfterViewInit , but the change detection won't get this change until a future round of change detection. After refactoring, the {{ message }} change happens in setter which will trigger change detection, so the change of message will be acknowledged by angular.

And this error will only be shown in Dev mode. This exception is being thrown for good reason: In short, when in dev mode, every round of change detection is followed immediately by a second round that verifies no bindings have changed since the end of the first, as this would indicate that changes are being caused by change detection itself.