Angular2 Wizard Switch

This project for Angular 2 (currently supported version 8) is a cool switch for opening and closing HTML elements such as inputs, textarea, links. Demo project here: Live demo example here.

Features

Support user templates

You can generate html templates to inject it in the switch.

Using font awesome icons as text of the control

You can use icon as text of the control or using simple text.

Make control is disabled or enabled

You have change disabled/enabled control by index, disabled all and enabled all actions.

Width management

You can manage item amd switch width.

Custom styles

You can customize class of the controllers or adding your own class.

Custom animation

You can customize the duration, delay and animation type.

Animation events

You can use start or end animation event.

Installation

Dependencies

For the slider to work correctly, the following dependencies are required:

• "@fortawesome/angular-fontawesome": "^0.5.0"
• "@fortawesome/fontawesome-svg-core": "^1.2.22"
• "@fortawesome/free-solid-svg-icons": "^5.10.2"

How to install

With npm

npm install @kinect-pro/wizard-switch

With yarn

yarn add @kinect-pro/wizard-switch

How to setup

Add WizardSwitchModule and BrowserAnimationsModule to need module

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { WizardSwitchModule } from '@kinect-pro/wizard-switch';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    Angular2CarouselModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add switch component to need component and create template items.

app.component.html

<kp-wizard-switch>
    <input type="text" [kpItemTemplate]="'login'" [control]="'Login'">
    <input type="text" [kpItemTemplate]="'password'" [control]="'Password'">
</kp-wizard-switch>

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Using

Use font awesome icons

More information on using icons can be found here. Add icons to the component and import them to items array as value of the control property.

app.component.ts

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private service: DisableService) {}
  coffeeIcon = faCoffee;
}

app.component.html

<kp-wizard-switch>
    <input type="text" [kpItemTemplate]="'coffee'" [control]="coffeeIcon">
</kp-wizard-switch>

Set custom styles for controls

Using default styles

Add your styles into ::ng-deep{} in needed component style file.

app.component.scss

::ng-deep {
    .kp-wizard-control {
      span {
        background: green !important;
        color: yellow !important;
      }
    }
}

or you can adding global styles in your main style file.

styles.scss

.kp-wizard-control {
  span {
    background: green !important;
    color: yellow !important;
  }
}

*You must use !important to overwrite existing styles.

Using custom class

Add [controlStyle]="'your-class-name'" to <kp-wizard-switch></kp-wizard-switch>.

app.component.scss

::ng-deep {
    .custom-control {
      span {
        background: green;
        color: yellow;
      }
    }
}

app.component.html

<kp-wizard-switch [controlStyle]="'custom-control'">
    // Your templates here
</kp-wizard-switch>

Set custom animation

• duration: change animation duration. Must be integer (milliseconds) or string (seconds, for example '1.4s' or milliseconds, for example '1400ms'). Default value is '250ms'.
• delay: change animation delay. Must be as duration. Default value is 0.
• easing: change animation easing. Must be 'ease', 'easeIn', 'easeInOut', 'easeOut', 'linear' or valid 'cubic-bezier()'. You can create valid curve in generator here. Default value is 'easeIn'.

app.component.html

<kp-wizard-switch
    [animateOptions]="{duration: '1000ms', delay: '300ms', easing: 'cubic-bezier(.17,.67,.88,.1)'}">
    // Your templates here
</kp-wizard-switch>

Using disable actions

Add ControllService into needed component

app.component.ts

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { ControllService } from '@kinect-pro/wizard-switch';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private service: ControllService) {}

  changeDisabled() {
    this.service.disable(3); // Use this for change disabled option by item index
    // this.service.enableAll(); // Use this for enabled all items
    // this.service.disableAll(); // Use this for disabled all items
  }
}

app.component.html

Add [onDisableService]="true" to component. If you need make some items after initializing use [disabled]="true" for kpItemTemplate.

<kp-wizard-switch [onDisableService]="true">
  <input type="text" [kpItemTemplate]="'coffee'" [control]="coffeeIcon" [disabled]="true">
</kp-wizard-switch>
<button (click)="changeDisabled()">Change disable option</button>

Using trigger actions

Add ControllService into needed component

app.component.ts

import { Component } from '@angular/core';
import { ControllService } from '@kinect-pro/wizard-switch';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private service: ControllService) {}

  triggering() {
    this.service.trigger('login'); // Use this for triggering login control
    // this.service.closeAll(); // Use this for closing all items
    // this.service.openFirst(); // Use this for opening first item
    // this.service.openLast(); // Use this for opening last item
    // this.service.openNext(); // Use this for opening next item
    // this.service.openPrev(); // Use this for opening previous item
  }
}

app.component.html

<kp-wizard-switch>
  <input type="text" placeholder="login" [kpItemTemplate]="'login'" [control]="'Login'">
  <input type="text" placeholder="password" [kpItemTemplate]="'password'" [control]="'Password'">
</kp-wizard-switch>
<button (click)="triggering()">Login trigger</button>

Width management

Items width management

Use [uniformWidth] option to change the display style of the width of the elements. For this, pass the boolean parameter (true or false) to the HTML template.

app.component.html

<kp-wizard-switch [uniformWidth]="false">
    // Your templates here
</kp-wizard-switch>

If you choose true, then all elements will have the same value equal to the width of the longest element. For false option every item will have own width. Default value is true.

Switch width management

Use [autoResponsive] option to change the display style of the width of the switch. For this, pass the boolean parameter (true or false) to the HTML template.

app.component.html

<kp-wizard-switch
    [uniformWidth]="false"
    [autoResponsive]="true">
  // Your templates here
</kp-wizard-switch>

If you choose true, then switch will change width after any animation. For false option width will't change. Default value is false. Use this option, then [uniformWidth]="false".

Using animation events

You can use your handler functions to start or end the animation.

app.component.html

<kp-wizard-switch
    (onStartAnimation)="startAnimationCallback()"
    (onEndAnimation)="endAnimationCallback()">
  // Your templates here
</kp-wizard-switch>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  startAnimationCallback() {
    console.log('Start animation');
  }
  
  endAnimationCallback() {
    console.log('End animation');
  }
}

Manage multiple switches in one component

If you have several switches in one component, you can control all at once, or only certain. To do this, you need to specify a name for each switch [name]="'yourUniqName'", and pass them to control methods for controls.

app.component.html

<kp-wizard-switch [name]="'first'>
      <input type="text" placeholder="login" [kpItemTemplate]="'login'" [control]="'Login'">
      <input type="text" placeholder="password" [kpItemTemplate]="'password'" [control]="'Password'">
</kp-wizard-switch>

<kp-wizard-switch [name]="'second'>
      <input type="text" placeholder="login" [kpItemTemplate]="'login'" [control]="'Login'">
      <input type="text" placeholder="password" [kpItemTemplate]="'password'" [control]="'Password'">
</kp-wizard-switch>

<kp-wizard-switch [name]="'third'>
      <input type="text" placeholder="login" [kpItemTemplate]="'login'" [control]="'Login'">
      <input type="text" placeholder="password" [kpItemTemplate]="'password'" [control]="'Password'">
</kp-wizard-switch>

<div>
  <button (click)="changeDisabled()">Disable login</button>
  <button (click)="disableAll()">Disable all</button>
  <button (click)="enableAll()">Enable all</button>
</div>

app.component.ts

import { Component } from '@angular/core';
import { ControllService } from '@kinect-pro/wizard-switch';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
    constructor(private service: ControlService) { }

    changeDisabled() {
      this.service.disable('login', ['second', 'third']);
    }
  
    disableAll() {
      this.service.disableAll();
    }
  
    enableAll() {
      this.service.enableAll('second');
    }
}

changeDisabled() will act only on the second and third switches. disableAll() will act on the all switches, because switchName option is empty. enableAll() will act only on the second switch.

In the switchName, you can pass either a string with one name or an array of names. If you pass [name]="'notFound'" of a switch that is not in the component, then the control functions WILL NOT WORK

Contact us