既に解決済みかも知れませんが。
divタグとngIfでtoggleの選択結果から表示内容を切り替える方法です。
component.html
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle (click)="onClick('car')">car</mat-button-toggle>
<mat-button-toggle (click)="onClick('bike')">bike</mat-button-toggle>
</mat-button-toggle-group>
<div *ngIf="isCar()">
<mat-form-field>
<select matNativeControl required>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</mat-form-field>
</div>
<div *ngIf="isBike()">
<mat-form-field>
<select matNativeControl required>
<option value="kawasaki">Kawasaki</option>
<option value="honda">Honda</option>
<option value="suzuki">Suzuki</option>
<option value="yamaha">Yamaha</option>
</select>
</mat-form-field>
</div>
component.ts
export class AppComponent {
title = 'stackoverflow';
selectedValue:any;
onClick(value:any){
this.selectedValue=value;
}
isCar():boolean{
if(this.selectedValue==='car')return true;
return false;
}
isBike():boolean{
if(this.selectedValue==='bike')return true;
return false;
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from "@angular/forms";
import {MatInputModule} from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatSelectModule} from '@angular/material/select';
import {MatFormFieldModule} from '@angular/material/form-field';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
MatInputModule,
BrowserAnimationsModule,
MatButtonToggleModule,
MatSelectModule,
MatFormFieldModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ご参考までに。