Как связать значение для «data-target» в угловых 5

Question

У меня есть кнопка с целью данных. Я хочу, чтобы цель данных была условной, и в зависимости от условия (логическое значение) значение для цели данных должно быть изменено.

КОД HTML:

<button class='pricing-addon' style="margin-left: 20px"  data-toggle="modal" data-target="#add-addons">Add Add-on's</button>

я пробовал с data-target = {{variable}} не работает даже с
[attr.data-target] = "'# exampleModalCenter"

существует ли другой способ условного связывания значения угловым способом.

Answer 1

[attr.data-target]="condition ? "true_option" : "false_option"

Это оценит условие и в зависимости от того, будет ли оно истинным или ложным, установит значение data-target для данной опции.

Answer 2

Спасибо за вопрос.

data-target используется как метод для запуска другого элемента. Вы можете использовать простое событие щелчка и добавить метод для определения значения, которое нужно установить, и использовать * ngIf вместо использования этого атрибута, подобного этому -

<button (click)="setValue($event)">

и внутри setValue метод, вы можете определить значение для установки

<element *ngIf="!value"></element>

Это альтернатива для достижения цели данных.