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.

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 DisableService into needed component

app.component.ts

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

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

  changeDisabled() {
    this.service.setChangeDisabledIndex(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>

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

Contact us