Border doesn't hide, when condition satisfied-CodePudding

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 ><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"  >
   <div ><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

CodePudding user response：

I am not an Angular developer, but my first approach would be to add a CSS class that has a display: none property to try to solve it.

CodePudding user response：

It's little bit unclear for me, but ngClass and ngStyle always override other styles. if you want to hide the border check the border's css from devtools and apply class based on appropriate condition to hide it with display: none property