0

Angular6において、
検索フィルター+ツリー形式選択可能なプルダウンメニューを実装したいと思い、
mat-button-toggleをクリックした際に別要素(#menu)を表示するようにしたいです。

いろいろ模索したのですが方法が見つからないので、
知見がある方いらっしゃれば、ご教授いただきたいです。

以下、実装中のhtml(一部)です。

<mat-button-toggle-group class="dropdown-button" [class.dropdown-button--disabled]="disabled">
<mat-button-toggle mat-ripple [disabled]="disabled" class="dropdown-button__main" [matRippleDisabled]="disabled" (click)="onClick()">
    {{selectedText}}
</mat-button-toggle>
<mat-button-toggle mat-ripple class="dropdown-button__trigger" [matMenuTriggerFor]="menu">
    <mat-icon>arrow_drop_down</mat-icon>
</mat-button-toggle>

よろしくお願いします!

1 件の回答 1

1

既に解決済みかも知れませんが。
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 { }

ご参考までに。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。