CODEWITHSUNDEEP
angularangular-material
user9754798
user9754798

Reputation: 443

Mat-button-toggle loses group styling if not a direct child of mat-button-toggle-group

I have the Angular template code below, and I'm using some structural directives to display certain buttons on screen according to a value aspectChoice set elsewhere on the page.

What I want to do, is display all of the options of resolutionAssetMappings where the element's other.aspectRatio property matches the aspectChoice value. This is fine, it works properly.

The only issue is that since mat-button-toggle needs to be a direct child of mat-button-toggle-group in order to benefit from the styling applied to each button. Since the div element separates them, they aren't being styled properly.

However, Angular doesn't let you put more than one structural directive onto a single element. So having both the *ngFor and the *ngIf on the mat-button-toggle element is impossible. Meaning I need the div to separate them so I can iterate over the resAssetMappings array and THEN check whether or not the button element in question should be displayed or not.

<mat-button-toggle-group formControlName="resolutionChoice" class="button-group">
                <div *ngFor="let resolution of resolutionAssetMappings">
                  <mat-button-toggle *ngIf="resolution.other.aspectRatio === aspectChoice"
                                     class="option-button" value="{{resolution.name}}">
                    {{resolution.prettyName}}
                  </mat-button-toggle>
                </div>
              </mat-button-toggle-group>

Is there a way I can alter this so that I can have both the behaviour I want and the styling?

Upvotes: 2

Views: 978

Answers (1)

user9754798
user9754798

Reputation: 443

The answer to this was to replace the div element with the ng-container element. The ng-container isn't rendered to the DOM but also allows you to apply both structural directives.

Upvotes: 1

Related Questions