Put an angular variable in an HTML attribute - html

Question

Question:
In the below sample code, we can see that each message has a unique MessageSid.
In the HTML code, I would like to set
data-target="#deleteModal" to data-target="#{{message.MessageSid}}"
and similarly
id="deleteModal" to id="{{message.MessageSid}}"
How can I do this? I would like each modal to be individual to each message.
MessageDetail Model
export class MessageDetail {
MessageSid: string;
Body: string;
Time: string;
Direction: string;
FromPhoneNumber: string;
ToPhoneNumber: string;
}
HTML code
<div id="listOfMessages" class="mt-5">
<div class="container" *ngFor="let message of messageList" [ngClass]="classDirection(message)">
<img src="/assets/img/avatar.png" alt="Avatar">
<p>{{message.Body}}</p>
<button class="btn btn-danger btn-circle btn-circle-sm m-1 float-right" data-toggle="modal" data-target="#deleteModal"><i class="fa fa-times"></i></button>
<span class="time-right">{{message.TimeCreated}}</span>
<!-- Confirm Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this message?</p>
<p>{{message.Body}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" (click)="deleteMessage(message, $event)">Delete</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Confirm Delete Modal-->
</div>
</div>
I have tried this solution on my own. But it seems only Modals 1,4,7 in the list work. The ones in between do not pop up when clicked.
<div id="listOfMessages" class="mt-5">
<div class="container" *ngFor="let message of messageList" [ngClass]="classDirection(message)">
<img src="/assets/img/avatar.png" alt="Avatar">
<p>{{message.Body}}</p>
<button class="btn btn-danger btn-circle btn-circle-sm m-1 float-right" data-toggle="modal" attr.data-target="#{{message.MessageSid}}"><i class="fa fa-times"></i></button>
<span class="time-right">{{message.TimeCreated}}</span>
<!-- Confirm Delete Modal -->
<div class="modal fade" id="{{message.MessageSid}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this message?</p>
<p>{{message.Body}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" (click)="deleteMessage(message, $event)">Delete</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Confirm Delete Modal-->
</div>
</div>

Answer 1

You should do in the HTML:
...
<div [id]="'#' + message.messageSId"> </div>
...
Inside the tag you should do with [attr]="typeScriptExpression" (property binding), not with attr={{typeScriptExpression}} (interpolation)
Reference to study: https://angular.io/guide/template-syntax

Answer 2

Thank you. I figured out the issue. Some MessageSids began with numbers and apparently you cannot have a tag with an ID that begins with a number. Prefixing a character solved the issue.