Estoy tratando de definir un componente Angular que muestre un área de información. Desaparece cuando se cumple la condición. parcialmente esto funciona, pero el borde siempre permanece, el resto de los elementos de estilo se ocultan cuando se cumple la condición.

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; }

componente utilizado en el código

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

Cuando se cumple la condición, los componentes están ocultos pero aún veo el borde definido que proviene de la directiva CSS. Cuando escondo el borde en el inspector del navegador, el borde de los componentes desaparece, pero no entiendo por qué el borde no está oculto.

Si configuro mi código para que la declaración de estilo esté en el componente.html y no dentro del código con el componente, no tengo el siguiente problema. Sin embargo, necesito usar estos componentes en otros lugares de código donde necesito definir otros colores de borde, por lo que la siguiente solución funciona, PERO no puedo usarla porque necesito definir otras clases de css, y no puede ser estático el s-ayuda clase css:

info-component.html :

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

componente utilizado en el código

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

La siguiente solución funciona para mí. Aquí el borde también está oculto. sin embargo, la declaración de clase debe hacerse cuando el componente está definido en el código.

¿Alguna sugerencia?

esta frontera no debería estar aquí