When trying to display either a confirm or cancel button based on a boolean set in my component.ts, I implemented the following code in my HTML:
<mat-dialog-actions class="dialog-actions">
<button class="cancel-btn" (click)="closeDialog(false)" [mat-dialog-close]="false" color="warn" mat-raised-button>
{{cancelButtonText}}
</button>
<button *ngIf="!cancelOnly" id="dialog-confirm-button" class="confirm-btn" (click)="closeDialog(true)" [mat-dialog-close]="true" color="accent" mat-raised-button>
{{ confirmButtonText }}
</button>
</mat-dialog-actions>
This code snippet is from my component.ts file:
public openReset(): void {
const dialogData = {
headline: this.translate.instant('APP.RESET'),
content: this.resetDialogContent,
cancelOnly: true,
cancelButtonText: this.translate.instant('APP.CANCEL'),
};
this.ui.openDialog(dialogData, { disableClose: false }, (confirmed) => {
//implement logic here
});
}
I am facing an issue where the text specified in `cancelButtonText` is not displaying when using the *NgIf directive along with it. The plain text shows up fine, and removing *NgIf also displays the `cancelButtonText`. It seems that only the combination of *NgIf and `cancelButtonText` causes issues. Any insights on why this is happening?
Here are examples illustrating how it currently looks and how it should look like:
Picture with no text but button \n Picture with text and button but no *NgIf
I have double-checked all attributes and they seem to be properly set. However, I cannot figure out why the text is not showing as expected.