Передача помеченных значений для переключения компонента флажка ⇐ CSS

[Anonymous]

У меня есть компонент-переключатель с двумя помеченными значениями. Я использую этот компонент в другом компоненте.

Как лучше всего передать значение дочернему компоненту при изменении значения переключателя?

это HTML и CSS ниже. Спасибо, что помогли мне с компонентом переключения.

На данный момент метки жестко запрограммированы, но я буду передавать значения из дочерних компонентов. Мой вопрос: если для значения установлено значение A, а при изменении на B, как мне привязать это значение к моему дочернему компоненту.

Каков наилучший способ Angular передать значение переключателя при изменении?

Ниже приведен шаблон и CSS для компонента переключения:
слева право .buttonWarpper { положение: относительное; дисплей: сетка; столбцы-шаблона сетки: повторение (2, 1fr); ширина: подходящее содержимое; граница: сплошная 3 пикселя #f02d1f; радиус границы: 20 пикселей; фон: #f02d1f; цвет: #f02d1f; курсор: указатель; } .buttonWarpper::before { содержание: ''; позиция: абсолютная; ширина: 50%; высота: 100%; слева: 0%; радиус границы: 20 пикселей; фон: белый; переход: все 0,3 с; } .checkBox:checked+.buttonWarpper::before { осталось: 50%; } .buttonWarpper div { отступ: 10 пикселей; выравнивание текста: по центру; z-индекс: 1; } .checkBox { дисплей: нет; } .checkBox:checked+.buttonWarpper div:first-child { белый цвет; переход: цвет 0,5 с; } .checkBox:checked+.buttonWarpper div:last-child { цвет: #f02d1f; переход: цвет 0,5 с; } .checkBox+.buttonWarpper div:first-child { цвет: #f02d1f; переход: цвет 0,3 с; } .checkBox+.buttonWarpper div:last-child { белый цвет; переход: цвет 0,5 с; }