illustration for Understand Angular Directives in Depth
Course

Understand Angular Directives in Depth

  9. 9
    Implement Structural Directive Data Binding with Context in Angular
    2m 3s

Implement Structural Directive Data Binding with Context in Angular

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 5 years ago

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.

View code for this lesson
felikf
felikf
~ 5 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
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.

Markdown supported.
Become a member to join the discussionEnroll Today