ng-toggle-btn.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'toggle-btn',
  template: `
      <label class='so-slide-toggle'>
        <input (change)="onChange($event)" type="checkbox"/>
        <span class="back">
          <span class="toggle"></span>
          <span class="label on" [title]="enabledText">{{ enabledText }}</span>
          <span class="label off" [title]="disabledText">{{ disabledText }}</span>
        </span>
      </label>
  `,
  styleUrls: ['./toggle-btn.component.scss']
})
export class ToggleBtnComponent  {

  @Input() enabledText = 'ON';
  @Input() disabledText = 'OFF';
  
  @Output() checkedChanged = new EventEmitter();

  constructor() { }

  onChange(value) {
    this.checkedChanged.emit(value.target.checked);
  }
}

.slide-toggle {
    position: relative;
    display: block;
    width: 70px;
    height: 18px;
    cursor: pointer;

    input[type=checkbox] {
      opacity: 0;
      position: absolute;
      width: 100%;
      height: 100%;
    }

    input[type=checkbox]+.back {
        position: absolute;
        border-radius: 100px;
        width: 100%;
        height: 100%;
        background: var(--light-gray);
        transition: background 150ms linear;

        .toggle {
          display: block;
          position: absolute;
          content: ' ';
          background: var(--green-color);
          width: 50%;
          height: 100%;
          transition: margin 150ms linear;
          border-radius: 100px;
        }
      }

    input[type=checkbox]:checked+.back {
      background: var(--light-gray);

      .toggle {
        margin-left: 50%;
      }
      .label.off {
        color: var(--gray-text-color);
      }
      .label.on {
        color: var(--white-color);
      }
    }

    .label {
      display: block;
      position: absolute;
      width: 50%;
      color: var(--white-color);
      text-align: center;
      font-size: 1rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .off {
      left: 0;
      top: 2px;
    }

    .on {
      right: 0;
      top: 2px;
    }
}