Want to invoke another element when clicking the toggle button (mat-button-toggle) on Angular 6

In Angular 6,
We would like to implement a pull-down menu that allows you to select search filters and tree formats.
I would like to see another element (#menu) when I click mat-button-toggle.

I've tried many things, but I can't find a way, so
If you have any knowledge, please let me know.

The following are some of the html implementations:

<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>

Thank you for your cooperation!

angular-material angular6

2022-09-30 16:12

1 Answers

It may have already been resolved.
This is how to switch between the results of the toggle selection with div tag and ngIf.

component.html

<mat-button-toggle-group name="fontStyle" aria-label="FontStyle">
  <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({
  decalations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    MatInputModule,
    BrowserAnimationsModule,
    MatButtonToggleModule,
    MatSelectModule,
    MatFormFieldModule
  ],
  providers: [ ],
  bootstrap: AppComponent
})
export class AppModule{}

For your information.

2022-09-30 16:12

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656