Дайте динамический c ID Angular шаблон html

Question

Я создал шаблон html, который повторно используется в родительском компоненте несколько раз, но с другими данными, переданными.

У меня есть parent.component. html, который имеет

    <child-component title="one"></child-component>
    <child-component title="two"></child-component>
    <child-component title="three"></child-component>

Который работает просто отлично.

Дело в том, что в 'child-component' у меня есть флажки и соответствующие им метки. Как вы знаете, им нужен атрибут для , чтобы знать, когда установлен флажок. Как я понял, Angular каждый раз вызывает рендеринг дочернего компонента, как клон, а атрибуты для одинаковы для каждого дочернего компонента, поэтому флажки не работают , Я хочу иметь возможность создавать динамические c для и id для каждого флажка каждый раз, когда вызывается дочерний компонент.

Я пытался объяснить свой проблема как можно лучше. Возможно ли такое решение?

Answer 1

Вдохновленный комментарием @mynameisx, решение оказалось проще, чем я думал.

Поскольку у меня есть свойство title, переданное с другим значением, которое само по себе дифференцирует каждый дочерний компонент. Итак, в каждом дочернем компоненте я написал это для id и для ввода:

<input type="checkbox" id="{{ title }} + Check">
<label for="{{ title }} + Check"></label>

Флажки работают!