Why the component does not detect internal state change without `changeDetetectorRef.markForCheck`?

Question

General

I have a problem. My component does not re-render without calling changeDetectorRef.markForCheck method.

I have an autocomplete. When input changes I send some async request (just simple HttpClient service and get method). After that, I fill in some internal state.

The code

Note markForCheck call. If I remove this line: nothing works. I noticed that if I remove it and if I click somewhere outside of the component, I see re-render. Right in time when I click somewhere component is re-rendered.

By the way, I realized that markForCheck is working by accident. I just tried something and it worked. I got info about CD mechanisms and CD service from some articles.

Here is my main component:

@Component({
  selector: 'tags-auto-complete',
  template: `
    <tags-internal-auto-complete-input
      // ....
      (inputChanged)="onInputChange($event);"
    ></tags-internal-auto-complete-input>
    <tags-internal-auto-complete-results
      [data]="queryResultsTags"
      // ....
    ></tags-internal-auto-complete-results>
  `,
})
export class TagsAutoCompleteContainerComponent implements OnInit {
  inputChanged = new Subject<string>();
  queryResultsTags: Tag[] = [];

  constructor(
    private tagsService: TagsService,
    private changeDetectorRef: ChangeDetectorRef,
  ) {}

  onInputChange(query: string): void {
    this.inputChanged.next(query);
  }
  ngOnInit() {
    this.inputChanged
      .filter(inputValue => inputValue.length > 0)
      .debounceTime(400)
      .switchMap(query => this.tagsService.getTagsList({ query }))
      .do(() => this.changeDetectorRef.markForCheck()); // note this
      .subscribe((tags: Tag[]) => (this.queryResultsTags = tags)) // here I change the input of inner component
  }
  // ...

Here is child component (tags-internal-auto-complete-results):

@Component({
  selector: 'tags-internal-auto-complete-results',
  template: `
    <div class="container">
      <span *ngFor="let tag of data" (click)="selectTag.emit(tag);" class="tag">
        {{tag.name}}
      </span>
    </div>
  `,
  styleUrls: ['./results.styles.css'],
})
export class TagsAutoCompleteResultsComponent {
  @Input() data: Tag[] = [];

  @Output() selectTag = new EventEmitter<Tag>();
}

These are just fragments. Whole code is available on GitHub.

By the way, I have another component (selected tags block) and I have input showLoader in it. It has exactly same problem.

My thoughts

Probably problem somehow connected to the zones mechanism. From some articles I know, that zone.js monkey-patches some events or XHR calls. And my case is XHR call (I didn't dive deep into HttpClient but it must just make an HTTP call).

What I want

I want to understand why changes are not detecting out of the box there (so I will use markForCheck and I will be ok) or I want to find a mistake in my code.

Hope you will help me there.

score 1 · Answer 1 · answered Oct 17 '17 at 23:05

1

It's due to a ChangeDetectionStrategy.OnPush added on a parent component.

In that parent, if the references of his inputs don't change, his subtree components will not be checked for change.

answered Oct 17 '17 at 23:05

Mohamed Gara

2,665
3
13
19

Is OnPush is set by default? I dont have it set up. – Sharikov Vladislav Oct 18 '17 at 06:20
It's nice variant and I was thinking about it. Since it is not set I am bot sure it's change detection strategy. – Sharikov Vladislav Oct 18 '17 at 06:50
How you can explain that? – Sharikov Vladislav Oct 18 '17 at 06:50
The default is ChangeDetectionStrategy.Default, which always detects changes. – Mohamed Gara Oct 18 '17 at 07:07
By parent did you mean parent component of TagsAutocomplete or just TagsAutocomplete? – Sharikov Vladislav Oct 18 '17 at 07:08
The parent can be any one in the component tree of your web page where you used the autocomplete. It's not limited to autocomplete component definition. – Mohamed Gara Oct 18 '17 at 08:03
Here is an exemple of an OnPush in your project: https://github.com/sharikovvladislav/ng2-diary-book/blob/master/src/app/diary/components/diary-entry-form.ts – Mohamed Gara Oct 18 '17 at 08:16
That makes sense. Is it possible somehow to check what strategy is currently applied to the component? – Sharikov Vladislav Oct 18 '17 at 08:22
I can't see how we could do it. – Mohamed Gara Oct 18 '17 at 21:30
Don't you think it's a bit strange and not obvious to call Mark for check? – Sharikov Vladislav Oct 18 '17 at 21:41
The problem is that we want to detect local changes in a generic component that can be used as a child (direct or transitive) of a component with OnPush strategy. And to be sure that the component work correctly in all cases, we have to use either ChangeDetectorRef.markForCheck() or ChangeDetectorRef.detectChanges(). In some cases, the first method will be better and in some other cases the second will be. And I don't know a cleaner alternative for our problem. – Mohamed Gara Oct 18 '17 at 22:42
And to answer to your question, I will say that it's not strange because with OnPush, we try to optimize, and when we optimize we can use non obvious solutions. – Mohamed Gara Oct 18 '17 at 22:45
Yep exactly. It's not obvious :( I simply forget about it. Only one thing I can do there is to specify change detection strategy on the component. – Sharikov Vladislav Oct 18 '17 at 22:48

Why the component does not detect internal state change without `changeDetetectorRef.markForCheck`?

General

The code

My thoughts

What I want

1 Answers1