I have an issue with that Angular do not update @ViewChildren
field.
In component I have the following html
view:
<audio-player #audioPlayer
...>
</audio-player>
and the following code:
export class CustomDetailsComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
...
@Input() customDetails: <Type>;
@ViewChildren('audioPlayer') audioPlayers!: QueryList<AudioPlayerComponent>;
...
}
After update of main field customDetails
of CustomDetailsComponent
audioPlayers
still is not updated.
audioPlayers
depends on number of audio files in customDetails
component.
Is there a way to rerender CustomDetailsComponent
completely ? Because for me it looks like that @ViewChildren('audioPlayer')
calculated only once at component creation ...
What actually helped me is the following code:
export class CustomDetailsComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
...
_customDetails!: <Type>;
@Input({ required: true })
set customDetails(value: <Type>) {
this._customDetails = value;
this.cdr.detectChanges();
}
get customDetails() {
return this._customDetails;
}
@ViewChildren('audioPlayer') audioPlayers!: QueryList<AudioPlayerComponent>;
...
}
Because audioPlayers
depends on number of components in customDetails
, I decided to add setter for customDetails
and run cdr
for changes detection, and it helped !!
Of, this Angular dependency management in Angular is not so intuitive, most time it detects changes, but sometimes not, and you fight with it :)