CODEWITHSUNDEEP
angularmaterial-ui
Zohidbek Abduqodir
Zohidbek Abduqodir

Reputation: 326

Material slide toggle to show button/content

I am new to Angular. I am building a website that would compile test questions which should be entered in LaTeX format with image/gif/audio/video/hybrid files upload features from the device. Since I can't find a good text editor, I'm forced to create a separate button for other file types with a slide toggle from Angular Material UI. But I couldn't find the proper solution to show the button via sliding toggle.

Example for using slide toggle to show button or other features

Upvotes: 1

Views: 638

Answers (1)

Eliseo
Eliseo

Reputation: 58124

You can use a expansion-panel with a slide-toogle disabled that you force opacity to 1

  <mat-expansion-panel #pannel >
    <mat-expansion-panel-header  >
      <mat-panel-title>
      <mat-slide-toggle 
             [style.opacity]="1" 
             [disabled]="true"
             [ngModel]="pannel.expanded" >Slide me!</mat-slide-toggle>

      </mat-panel-title>
      
    </mat-expansion-panel-header>
    <p>This is the primary content of the panel.</p>
  </mat-expansion-panel>

see stackblitz

Upvotes: 2

Related Questions