CODEWITHSUNDEEP
javascriptcssangular
jawknee530
jawknee530

Reputation: 319

Having multiple mat-button-toggle-groups on one page

I have several button groups but they all seem to be sharing the same values across each other. It seems that it's because they're all assigned to the same #group but if I try to assign them to anything other than their current group I get an error.

<div class="options">
            <span class="option-left">
                <mat-button-toggle-group #group="matButtonToggleGroup" aria-label="Font Style" [(value)]="TableType" (change)="OnToggleChanged(group.value)">
                    <mat-button-toggle value="Trader">Trader</mat-button-toggle>
                    <mat-button-toggle value="Source">Source</mat-button-toggle>
                    <mat-button-toggle value="Shift">Shift</mat-button-toggle>
                    <mat-button-toggle value="Product">Product</mat-button-toggle>
                    <mat-button-toggle value="RiskLevel">Risk</mat-button-toggle>
                </mat-button-toggle-group>
            </span>
            <span>
                <mat-button-toggle-group #group="matButtonToggleGroup" aria-label="Font Style" [(value)]="TradeViewMode">
                    <mat-button-toggle (click)="ViewTrades()" value="Show">View Trades</mat-button-toggle>
                    <mat-button-toggle (click)="HideTrades()" value="Hide">Hide Trades</mat-button-toggle>
                </mat-button-toggle-group>
            </span>
            <span class="option-right">
                <mat-button-toggle-group #group="matButtonToggleGroup" aria-label="Font Style" [(value)]="NumberType" (change)="NumberTypeValueChanged(group.value)">
                    <mat-button-toggle value="percent">Percent</mat-button-toggle>
                    <mat-button-toggle value="currency">Dollars</mat-button-toggle>
                </mat-button-toggle-group>
            </span>
        </div>

Additionally I have an issue with the (change) event

public OnToggleChanged() {
        this.PieChartSource = this.CollectionByType[this.TableType];
        this.EndTime = this.GetEndTIme();

        if (this.TableType != 'Trader' && this.TableType != 'Source') {
            this.ViewTradesEnabled = false;
            this.TradeViewMode = 'Hide';
        }

        this.GetSlippage();
    }

In the function above this.TableType is undefined which I'm not understanding since the toggle should have set it to the selected value.

Upvotes: 2

Views: 5410

Answers (1)

Pezetter
Pezetter

Reputation: 2862

I have a working example here. Take a look at the console logs to see how group.value works.

The name of the mat-button-toggle-group does not matter with respect to the value changes. All that should matter is that each group is bound to a different variable. Also, give each group its own id. They cant all be "#group"

Like so:

<mat-button-toggle-group #group="matButtonToggleGroup" aria-label="Table Type" [(value)]="TableType" (change)="OnToggleChanged(group.value)">
  <mat-button-toggle value="Trader">Trader</mat-button-toggle>
  <mat-button-toggle value="Source">Source</mat-button-toggle>
  <mat-button-toggle value="Shift">Shift</mat-button-toggle>
  <mat-button-toggle value="Product">Product</mat-button-toggle>
  <mat-button-toggle value="RiskLevel">Risk</mat-button-toggle>
</mat-button-toggle-group>
<br>
<br>
<mat-button-toggle-group #group2="matButtonToggleGroup" aria-label="Trade View" [(value)]="TradeViewMode" (change)="OnToggleChanged(group2.value)">
  <mat-button-toggle (click)="ViewTrades()" value="Show">View Trades</mat-button-toggle>
  <mat-button-toggle (click)="HideTrades()" value="Hide">Hide Trades</mat-button-toggle>
</mat-button-toggle-group>
<br>
<br>
<mat-button-toggle-group #group3="matButtonToggleGroup" aria-label="Number Type" [(value)]="NumberType" (change)="OnToggleChanged(group3.value)">
  <mat-button-toggle value="percent">Percent</mat-button-toggle>
  <mat-button-toggle value="currency">Dollars</mat-button-toggle>
</mat-button-toggle-group>

<pre>
  TableType: {{TableType}}
  TradeViewMode: {{TradeViewMode}}
  NumberType: {{NumberType}}
</pre>

Upvotes: 1

Related Questions