ngx-mat-light-switch

Reusable and Customizable Angular Material Component - Switch app's themes (light and dark)

@kpucha

Demo

//TODO

Installation

Install with npm

  npm install @kpucha/ngx-mat-light-switch

Usage / Examples

Import module from your local distribution

import { LightSwitchModule } from 'ngx-mat-light-switch';
//...
  imports: [..., LightSwitchModule]
//...

Import css from the module assets in your src/styles.scss

@import "../node_modules/ngx-mat-light-switch/assets/light-switch.scss";

Show the component

<ngx-mat-light-switch #lightSwitch></ngx-mat-light-switch>

Import component from your local distribution

import { LightSwitch } from "ngx-mat-light-switch";
//...
  @ViewChild(LightSwitch)
  lightSwitch!: LightSwitch;

  foo() {
    //GET LIGHT STATUS
    this.lightSwitch.lightStatus()
    //SET LIGHT STATUS
    this.lightSwitch.setLight(true);
    this.lightSwitch.setLight(false);
    //TOGGLE LIGHT STATUS
    this.lightSwitch.toggleLight();
  }
//...

Usage Locally

Clone the project

  git clone https://github.com/kpucha/ngx-mat-light-switch.git

Go to the project directory

  cd ngx-mat-light-switch

Install dependencies

  npm install

Build it

  npm run build

Copy the content of /dist to your project node_modules folder !!!

Follow the Usage / Examples section steps..

Directives

Properties

Name	Type	Description	Default value
@Input() lightsOn	Boolean	Light status	true
@Input() color	ThemePalette	Theme palette used -> 'accent' | 'primary' | 'warn'	'accent'
@Input() tooltipOn	string	Tooltip text when lights are on	'Turn lights off'
@Input() tooltipOff	string	Tooltip text when lights are off	'Turn lights on'
@Input() matIconOn	string	Icon when lights are on	'dark_mode'
@Input() matIconOff	string	Icon when lights are off	'light_mode'

Methods

Get light status

.lightStatus()

Return	Type	Description
status	boolean	Current light status

Set light status

.setLight(status)

Parameter	Type	Description
status	boolean	Required. Status to set lights to

Toggle light status

.toggleLigths()