Я хочу изменить статус нескольких тумблеров на моем сайте на "да" или "нет" современным способом.

Я не нашел готового решения, поэтому мне нужно понять, как сделать это правильно в Angular.

У меня есть 10 переключателей, которые должны выдавать отдельное булево значение и менять свой текст на "да" или "нет" по отдельности. Как этого добиться в Angular?

Это мой текущий код, который работает для 1 переключателя. (Использую bootstrap 5 в Angular 11)

   

.ts

export class SComponent implements OnInit {

  status = true;

  constructor() {
  }

  ngOnInit(): void {
  }

  isTrue() {
    return this.status = !this.status;
  }

  isFalse() {
    return this.status === false;
  }

}

Ответы (1)

Вы можете создать компонент switch-toggle и импортировать его в свой ShareModule

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

@Component({
    селектор: "switch-toggle",
    templateUrl: "./switch-toggle.component.html",
    styleUrls: ["./switch-toggle.component.scss"].
})
export class SwitchToggleComponent implements OnInit {
  @Input() id?: string;
  @Output() onChange: EventEmitter = new EventEmitter();
  value: boolean;

    constructor() {}

    ngOnInit() {}
  
    setValue(value) {
    this.value = value;
    this.onChange.emit({id: this.id, value: this.value});
    }
}

и используйте его в своем компоненте


каждый раз при изменении switch get объект типа {id: 'test1', value: true или false}

2022 WebDevInsider