Ngif else with css [Angular]

Question

is there a way to define that when my condition is not true, my component gets other attribute styles in Angular? i want to define my main css file.

i want something like this:

example (s-help.component.html): (not correct)

<div *ngIf="visible; else class="test" " >
   <div class="s-help-content "><span [translate]="text"></span></div>
</div>

css

.s-help{
    background-repeat: no-repeat;
    background-position: center left calc(0.37em + 0.37rem);
    background-size: calc(1em + 1rem) calc(1em + 1rem);
    border: 2px solid $warning !important;
    border-radius: 4px;
    display: block !important;   
    color: $gray-700;
    min-width: 220px;
    white-space: normal !important;
    padding-left: 5px !important;
    padding-right: 5px !important;

}
.s-help-content {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 45px;
    padding-right: 6px;
}

.test {
    display: none;
}

component used in code

<s-help [visible]="true" [ngClass]="'s-help'" [text]="'INFOTEXT.101' | translate"></s-help>

my issue is that the border of the component is visible all time, even if the condition is false

to make it more clear: https://stackblitz.com/edit/angular-ivy-etrn9z?file=src%2Fapp%2Fcomp%2Fcomp.component.html i dont want the border under the first info text

Answer 1

Is this what you need? ngClass will take a javascript expression as an input, here you can conditionally add the class or remove if needed!

<div *ngIf="visible" [ngClass]="!visible ? 'test' : ''" >
   <div class="s-help-content "><span [translate]="text"></span></div>
</div>

updated stackblitz