toggle button

<div
  class="toggle-button"
  [ngClass]="{'toggle-button_on': innerValue}"
  (click)="toggle()">
  <div class="toggle-button__circle"></div>
</div>

.toggle-button {
  width: 47px;
  height: 18px;
  border-radius: 9px;
  border: solid 1px #d2dced;
  background-color: #f2f2f2;
  outline: none;
  cursor: pointer;

  .toggle-button__circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: solid 1px #d2dced;
    background-color: #d2dced;
    margin: 2px;
    transition: 0.3s;
  }

  &.toggle-button_on .toggle-button__circle {
    transform: translateX(29px);
    transition: 0.3s;
    border: solid 1px #29adc1;
    background-color: #29adc1;
  }
}