mat-slide toggle Angular 4

Question

Ich habe ein Panel und eine Liste von Checkbox drin. Wenn ich den Slider öffne, sollte er die Liste innerhalb des Panels anzeigen und wenn ich den Slider schließe, schließt er die gesamte Liste. Aber wie kann ich dieses Event des Slider-Toggle speichern, so dass, wenn es geöffnet wird, sollte dieses Ereignis gespeichert werden und wenn ich zurückkomme und auf mein Panel klicke, wird der Slider als offen angezeigt. und wenn ich den Schieberegler schließe und später zurückkomme, sollte er geschlossen sein, bis ich ihn nicht geöffnet habe.

HTML:

<div class="panel panel-line panel-danger"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Meb Katmanları</h3> 
 
     <div class="panel-actions"> 
 
      <mat-slide-toggle color="warn" [(ngModel)]="allMebLayers" (change)="mebToggle()"></mat-slide-toggle> 
 
     </div> 
 
    </div> 
 
    <div *ngIf="allMebLayers" class="panel-body" style="max-height: 70vh; overflow-y: auto"> 
 

 
     
 
     
 
     <mat-selection-list *ngFor="let l of legends" style="overflow-y: hidden; overflow-x: hidden;"> 
 

 
      <mat-checkbox> 
 
        <td class="p-5" style = "width : 90%" >{{l.layerName}}</td> 
 

 
        <td class="p-5"><img [src]="l.legend.imageData"></td> 
 
      </mat-checkbox> 
 
     </mat-selection-list> 
 
     
 
      
 
    </div> 
 
</div>

Component.ts:

change() { 
 
     let mebLayers = this.layersOfMap[0]; 
 
     this.allMebLayers=true; 
 
     
 
     this.mapService.syncFeature2Map(); 
 
    } 
 

 
    mebToggle(){ 
 
     let mebLayers = this.layersOfMap[0]; 
 
     for (let m of mebLayers) this.allMebLayers ? m.visible = true : m.visible = false; 
 
     this.mapService.syncFeature2Map();

Answer 1

 `<div class="panel panel-line panel-danger"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">Meb Katmanları</h3> 
       <div class="panel-actions"> 
        <mat-slide-toggle color="warn" [checked]="checked" (ngModelChange)="toggle()"></mat-slide-toggle> 
       </div> 
      </div> 
      <div *ngIf="checked" class="panel-body" style="max-height: 70vh; overflow-y: auto"> 



       <mat-selection-list *ngFor="let l of legends" style="overflow-y: hidden; overflow-x: hidden;"> 

        <mat-checkbox> 
          <td class="p-5" style = "width : 90%" >{{l.layerName}}</td> 

          <td class="p-5"><img [src]="l.legend.imageData"></td> 
        </mat-checkbox> 
       </mat-selection-list> 


      </div> 
     </div>` 


    Component Code 

    ` 
    checked:boolean = false; 

    toggle() 
    { 
    this.checked = !this.checked; 
    } 

    ` 

checked variable mit save your last value of checked ..... wenn diese Komponente wieder geöffnet wird, wird dies entsprechend angezeigt