mz-switch v0.0.56

Описание

Скрипт для angular 6+, для скрытия/показа элементов с масивом

##### Установка
```ssh
npm i --save mz-view-switch

Подключение к модулю

import {MzSwitchModule} from "mz-view-switch";
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';

@NgModule({
  imports: [
    CommonModule,
    MzSwitchModule
  ],
  exports: [
    MzSwitchModule

  ],
})
export class SomeModule {}

Использование со всеми параметрами

    <button (click)="mzSwitcher.set('first')">show only first</button>
    <button (click)="mzSwitcher.set('second')">show only second</button>
    <button (click)="mzSwitcher.remove('second')">remove second</button>
    <button (click)="mzSwitcher.remove('second', 'first')">remove second, first</button>
    <button (click)="mzSwitcher.add('second', 'first')">add second, first</button>
    <button (click)="mzSwitcher.change(['first'], ['second'])">add first, remove second</button>
    <button (click)="mzSwitcher.add('first', 'second')">add first, second</button>
    <button (click)="mzSwitcher.clear()">clear</button>
    
    <div [mzSwitch]="['first']" #mzSwitcher='mzSwitcher'>
      <div>NEW</div>
      <div *mzSwitchCase="'first'">
        first
      </div>
    
      <div *mzSwitchCaseDefault>
        DEFAULT
      </div>
    
      <div *mzSwitchCase="'second'">
        second
      </div>
    </div>

Использование минимальное

    <div class="send"
         #mzSwitcher='mzSwitcher'
         mzSwitch>
    
         <div *mzSwitchCase="'first'"
              (click)="mzSwitcher.set('second')">
            first
         </div>
    
         <div *mzSwitchCaseDefault
              (click)="mzSwitcher.add('first')">
            DEFAULT
         </div>
    
         <div *mzSwitchCase="'second'"
              (click)="mzSwitcher.clear()">
            second
         </div>
    </div>

Пример работы 3 (storage, init, output)

    <div class="send"
         #mzSwitcher='mzSwitcher'
         [mzSwitchStorage]="{'sss': 233}"
         mzSwitch>
    
        <div>CONTENT</div>
    
         <div *mzSwitchCase="'first'"
              (mzSwitchOpen)="data = {b: 'FIRST'}"
              (click)="mzSwitcher.set('second', { storage: {'a': 1} })">
            <b>first</b>
         </div>
    
        <ng-template mzSwitchDefault
           (mzSwitchOpen)="data = {a: 'START'}"
           (mzSwitchClose)="data = $event">
           <div
                (click)="mzSwitcher.add('first', { storage: {'a': 2} })">
              <b>DEFAULT</b>
           </div>
        </ng-template>
    
         <div *mzSwitchCase="'second'"
              (click)="mzSwitcher.clear({ storage: {'a': 4} })">
            <b>second</b>
         </div>
    </div>
    
    <div>
        <div>STORAGE</div>
      {{ (mzSwitcher.getStorage() || {}) | json}}
    </div>
    <div>
        <div>DATA</div>
      {{ (data || {}) | json}}
    </div>

Пример работы 4

    <div class="send"
         #mzSwitcher='mzSwitcher'
         mzSwitch>
         <div *mzSwitchCase="['second']"
              (click)="mzSwitcher.clear({ storage: {'a': 4} })">
            <b>second 1</b>
         </div>
        
        <!-- when we has only second and -->
         <div *mzSwitchOnly="['second', 'only']"
              (click)="mzSwitcher.clear({ storage: {'a': 4} })">
            <b>second ONLY</b>
         </div>
        
         <div *mzSwitchIn="['fi', 'first']"
              (click)="mzSwitcher.clear({ storage: {'a': 4} })">
            <b>second mzSwitchIn</b>
         </div>
    </div>