In my Angular application, I am experimenting with stacking Bootstrap toast elements in a customized vertical layout. Specifically, I want certain toast elements to be positioned on the left side of the page (using the align-items-start style) and others on the right side (with the align-items-end style). However, all of these elements are currently nested under one parent Div.
Here's the code snippet:
- Parent component template
<div class="toast-container d-flex flex-column align-items-start">
<app-share-comment [comment]='comment' *ngFor="let comment of comments" >
</app-share-comment>
</div>
- Child
app-share-commenttemplate along with its CSS and TypeScript
<div class="toast" [ngStyle]="style" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-primary">{{comment.username}}</strong>
<time class="timeago" [dateTime]="commentTime"></time>
</div>
<div class="toast-body">
{{comment.comment}}
</div>
</div>
.toast{
min-width: 12vw;
width: fit-content;
margin: 0.6rem;
position: relative
}
ngOnInit(): void {
(<any>$('.toast')).toast('show');
this.style = this.getStyle()
}
getStyle(): Object {
if (this.comment.username == 'wayne'){
return {
left : 12 +'rem'
};
}
With the current implementation, I am achieving the following effect: https://i.sstatic.net/aNHD3.png
However, what I expect is that when items are selected to align to the right, they should be aligned with the right border instead of the left border, while other items remain aligned to the left border.
I have tried various flex properties but so far haven't been successful. Can anyone provide some guidance or assistance?
I have also created a StackBlitz demo for reference: https://stackblitz.com/edit/angular-ivy-jbp7ua