Setting properties on @ViewChildren in Angular

Question

In my html template I'm having multiple elements generated by *ngFor.

I am successfully able to subscribe to their value changes in the ngAfterViewInit lifecycle hook.

However, I am not able to set the .checked property via code.

Does somebody spot my error? Any help is really appreciated!

export class GroupsExpPanelComponent implements AfterViewInit {

  @ViewChildren('confirm') confirm: QueryList < MatButtonToggle > ;
  confirmToggles: MatButtonToggle[] = [];

  ngAfterViewInit() {
    this.confirm.changes
      .subscribe(
        res => {
          this.confirmToggles = res.toArray();
        }
      );
  }


<mat-button-toggle #confirm>Title</mat-button-toggle>

I would have expected to be able to set my properties like so

this.confirmToggles[index].checked = true;

Why are you not using view bindings like ``? That would be much more like things are done in Angular 2 and later. — Günter Zöchbauer, Feb 26 '18 at 16:39
I'll try that and refactor some code. Thanks for the suggestion, will come back here and report. — baouss, Feb 26 '18 at 17:39
Thanks Günther, I guess it was too late yesterday. I did some refactoring and am now using property binding like you suggested. Works for me in my specific case! — baouss, Feb 27 '18 at 12:21
Way better if the use case allows it. Glad to hear some sleep solved it :D — Günter Zöchbauer, Feb 27 '18 at 13:18

score 0 · Answer 1 · edited Feb 26 '18 at 17:43

0

this.confirmToggles[index] is a reference to a native element, not a native element in and of itself, nor an instance of the MatButtonToggle class.

(<HTMLInputElement> this.confirmToggles[index].nativeElement) might be what you want, assuming that the native element really is a button of some sort. Of course, messing around with native elements isn't really the ideal Angular way of doing things.

If you want to get back instances of your MatButtonToggle class, you need to use @ViewChildren(MatButtonToggle).

edited Feb 26 '18 at 17:43

baouss

1,312
1
22
52

answered Feb 26 '18 at 17:09

kshetline

12,547
4
37
73

@ViewChildren(MatButtonToggle) would give me all the instances in the componenent, right? What if I want to only query those instances that have been tagged #confirm in the template? – baouss Feb 27 '18 at 11:51
Maybe @ViewChildren('confirm', {read: MatButtonToggle}) would do the trick? I can't seem to find good documentation of how the read parameter works, but it's supposed to give you some control over the type of objects returned. – kshetline Feb 27 '18 at 12:18

Setting properties on @ViewChildren in Angular

1 Answers1