Angular Directive does not work with * ngIf. Calling a directive from a component

Question

I have two DIVs - one that is always visible, and the other that displays after clicking a button (this can be done):

<div>
  <div>
    <small>ADDRESS</small>
    <p [appQueryHighlight]="query">{{ address}}</p>
  </div>
</div>

<div *ngIf="showDetails">
  <div>
    <small>NAME</small>
    <p [appQueryHighlight]="query">{{ name}}</p>
  </div>
</div>

My custom directive works well on the first DIV (it changes the color of the letters inside the paragraph that correspond to the query entered in the "input"), but it does not work on the second DIV.

Here is an example of what “Test address” looks like when the request is “addr”:

Test addr ess
, where, for example, the text is red in bold.

But when I have the name John and the query is "Joh", it should also be colored as soon as the button is displayed, but it is not.

, div. , , , , . ?

Answer 1

UPDATE

* ngFor - DIV ngFor. ngOnChanges ngOnInit , . , , ng - .

:

, @iHazCode.

, -, , , , : Angular 4

, , , , ngOnChanges .

* ngIf, ngOnChanges , div .

@ViewChildren:

@ViewChildren(QueryHighlightDirective) dirs;

ngOnChanges, div . :

toggleDetails() {
  ...
  this.dirs.last.ngOnChanges();
}

, , -.

- DIV * ngFor, , , ngOnChanges. .

Answer 2

ngIf / . ngIf , DOM. , . , ngHide/Show.