I am trying to dynamically add a class to a div based on two conditions. To achieve this, I have created a custom directive as shown below:
import { Directive, HostBinding, Input } from '@angular/core';
@Directive({
selector: '[confirmdialog-style]',
})
export class ConfirmDialogStyleDirective {
@Input() isMsgDialog!: boolean;
@Input() dialogType!: string;
@HostBinding('class')
elementClass = this.isMsgDialog ? 'x-' + this.dialogType : '';
}
To use the directive, I incorporate it in my HTML like so:
<div
class="x-dialog-container"
confirmdialog-style
[isMsgDialog]="isMsgDialog"
[dialogType]="dialogType"
>
I set the values of isMsgDialog and dialogType properties in the parent component through a button click event. Upon inspection in Chrome's debug tools, I confirmed that both input properties are being correctly set.
However, despite setting the correct values, the expected class (e.g., x-danger) is not being added to the div. What could be causing this issue?