0

Hola quisiera hacerle una consulta, estaba haciendo cambios de styles a un componente mediante los comandos:

:host ::ng-deep 

ejemplo:

:host ::ng-deep .ng-tns-c13-3 .mat-icon-button{
  padding: 0;
    min-width: 0;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    line-height: 40px;
    border-radius: 50%;
    display: none;
}

y todo perfecto cuando actualizaba quedaba como yo queria como esta imagen

introducir la descripción de la imagen aquí

pero me dado cuenta que cuando ingreso desde login y voy al modulo esos estilos que habia definido en component.scss se pierde y ve asì:

introducir la descripción de la imagen aquí

pero cuando le doy F5 o actualizar la pagina recien coge los estilos que habia definido con el comando :host ::ng-deep

quisiera que al comienzo cuando ingrese ya agarre los estilos que he definido

en mi archivo component.ts si esta indicando que component se va utilizar

@Component({
  selector: 'app-corresponsal',
  templateUrl: './corresponsal.component.html',
  styleUrls: ['./corresponsal.component.scss'],
  animations: egretAnimations
})
2
  • y si usas ese estilo en _global.scss?
    – Andrea
    Commented el 8 may. 2021 a las 12:59
  • @AndreaJimenez si lo coloco no se modificara en todo los modulos ?
    – PieroDev
    Commented el 8 may. 2021 a las 13:03

2 respuestas 2

2

El problema está en usar las clases auto generadas como ng-tns-c13-3. Los números de esas clases corresponden al orden en que se van creando los componentes. Puede ser que al entrar directamente a la página el componente sea el c13 pero al entrar desde el login se tomen en cuenta otros componentes y al que haces referencia cambie a c14 etc.

Puedes usar una clase específica en su lugar:

:host ::ng-deep .clase-especifica .mat-icon-button{}

Y aplicar esa clase al elemento contenedor del .mat-icon-button

<elemento class="clase-especifica">
     ...
        <elemento class="mat-icon-button">
0

Hola buenas el problema era que esa clase era dinamica es decir si entrabas a un modulo tenia el codigo ng-tns-c13-4 pero cuando entrabas de otro tenia ng-tns-c13-5 y sucesivamente.

Investigando encontre que colocando [class*="ng-tns-c"] iba a obtener de forma dinamica todo. Aunque no se es una forma o habran mejores pero me soluciono el inconveniente.

:host ::ng-deep  [class*="ng-tns-c"] .ng-trigger-animate {

 margin-left: 15px; flex: 1 1 100%; box-sizing: border-box; max-width: 20%!important;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.