Dynamically add and remove Angular 5 Material attribute 'multiple'

Question

I am probably missing something basic here but am using mat-button-toggle-group and want to be able to use it as a radio button or as checkboxes depending upon application state ie radio button:

<mat-button-toggle-group>

and checkbox:

<mat-button-toggle-group multiple>

Normally, I would add and remove a tag's attributes something like this:

<mat-button-toggle-group [attr.multiple]="test ? multiple:null">

..but this doesn't appear to work. Any ideas?

Answer 1

It's not an attribute. It's an Angular directive in the mat-button-toggle-group component. So it's not possible to add multiple dynamically with [attr.multiple]

You have to use two mat groups with *ngIf like this :

<mat-button-toggle-group *ngIf="test" multiple></mat-button-toggle-group>
<mat-button-toggle-group *ngIf="!test"></mat-button-toggle-group>

Answer 2

Since multiple is not an attribute but a directive u can't add it dinamicly without accesing source code of underliyng component (and still it will be just a hack). This is sad news..

But anyways you can create 2 mat groups and rather display or not 1 of them depending on your test variable. And save it state, if it needed local varable.