I am trying to define an Angular component that displays an info area. This disappears when the condition is met. partially this works, but the border always remains, the rest of the style elements are hidden when the condition is met.

info-component-html:

<div *ngIf="visible" >
   <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;
}

component used in code

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

When the condition is met, the components are hidden but I still see the defined border which comes from the CSS directive. When I hide the border in the browser inspector, the components border disappears but I don't understand why the border is not hidden.

If I set my code so that the style statement is in the component.html and not inside the code with the component, I don't have the following problem. However, I need to use these components in other code places where I need to define other border colors, so the following solution does work, BUT i can´t use it because i need to define other css classes, and it cant be static the s-help css class:

info-component.html:

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

component used in code

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

The following solution works for me. Here the border is also hidden. however, the class statement must be made when the component is defined in the code!

Any suggestions?

this border shouldnt be here