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?
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>
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.
The multiple is a native boolean attribute for <select>. So only if you use a native select you're able to do the following:
<select [multiple]="!!yourExpression">
Here you are a stackblitz
Unfortunately, I've tried this on angular material and it doesn't work. They don't have support for this attribute as expression. Maybe they decided support it only in the following way: <mat-button-toggle-group multiple>.
This is the code on github. Clearly is the an attr in the selector of the directive.
PD: The @Pterrat awnser is fine to do what you want.
I was trying to do something similar with mat-select (angular material 7) and at least for mat-select this works (where multiple is a boolean property on your class):
<mat-select [(value)]="value"
[multiple]="multiple">
<mat-option *ngFor="let option of options"
[value]="option">{{option}}</mat-option>
</mat-select>
