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 " >
<div ><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/app/comp/comp.component.html i dont want the border under the first info text
CodePudding user response:
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 ><span [translate]="text"></span></div>
</div>