

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

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

以下、実装中のhtml（一部）です。

[code]

    <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>
    
[/code]

よろしくお願いします！


CC BY-SA 4.0
2018-08-23T07:08:30.197
47759
2022-03-30T15:04:15.487
2018-11-12T08:27:44.517
3060
29830
question
angular-material angular6
Angular6でトグルボタン（mat-button-toggle）クリック時に別要素を呼び出したい


既に解決済みかも知れませんが。  
divタグとngIfでtoggleの選択結果から表示内容を切り替える方法です。

component.html

[code]

    <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>
    
[/code]

component.ts

[code]

    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;
      }
    
    }
    
[/code]

app.module.ts

[code]

    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 { }
    
[/code]

ご参考までに。


CC BY-SA 4.0
2018-11-12T08:18:26.400
50239
2018-11-12T08:18:26.400
30559
47759
answer