0

Tengo que hacer una modificación CSS dentro de un componente para una sola página. Es solo ponerle un display:none para que desaparezca.

He intentado llamarlo por su clase y por su clase y la que añade Angular pero no me hace caso.

¿Es posible modificarlo de alguna manera o es imposible?

Os dejo lo que tengo actualmente.

Gracias de antemano

HTML

<app-header></app-header>

HTML del componente en el navegador

introducir la descripción de la imagen aquí

El CSS que me gustaría modificar corresponde a esta etiqueta

<div _ngcontent-gid-c25="" class="layout-topbar-right">
6
  • Puede ser que sea problema de especificidad webdesign.tutsplus.com/es/tutorials/…
    – Lobos
    el 31 mar. 2021 a las 19:19
  • Para hacer que un elemento desaparezca de la página en un componente Angular puedes usar la directiva ngIf.
    – Isaac
    el 31 mar. 2021 a las 19:44
  • No, @Lobos, he probado a nombrar las clases del elemento, con selectores... De todas las formas CSS y no me hace caso. Incluso he probado a modificar otro elemento más accesible y nada. Solo me deja si le aplico una clase a app-header
    – Jaime M.
    el 31 mar. 2021 a las 19:45
  • Rederer2 de Angular está creado con el fin de modificar el DOM, utilízalo. realiza una inyección de este servicio a tu componente y en AfterViewInit puedes buscar el div concreto por clase con el método selectRootElement. La manera que @Isaac menciona se suele preferir, porque esto provoca que todo el Subarbol DOM dentro del if no se cree, ni los procesos de estos, mejorando el rendimiento.
    – Mario
    el 31 mar. 2021 a las 19:52
  • ¿Tendría que ponerlo en el ts del componente app-header o dónde invoco? Si es dentro del componente no me vale ya que ese componente se usa en más páginas. Si tenéis algún ejemplo, @Mario / Isaac, os lo agradecería mucho. Soy muy nuevo con Angular y ando perdido
    – Jaime M.
    el 31 mar. 2021 a las 20:02

2 respuestas 2

0

Puedes usar la directiva ngIf.

Si es un componente que usas una sola vez en tu aplicación y quieres que ese elemento desaparezca dinámicamente en función de una condición que se produce en el mismo componente:

<div *ngIf="miCondicion">

Si es un componente que usas varias veces en tu aplicación y en una de las instancias quieres que ese panel no se muestre, puedes usar la directiva ngIf combinada con un atributo input en tu componente. Es decir:

El el controller de tu componente:

Input() ocultar = false;

En el HTML de tu componente:

<div *ngIf="ocultar">

En el HTML donde quieres usar tu componente y que se oculte ese panel:

<mi-componente [ocultar]="true"></mi-componente>
0

Finalmente arreglé el fallo de sobreescritura del CSS del componente de PrimeNG añadiendo al component.ts lo siguiente (ViewEncapsulation):

import {Component, Input, OnInit, **ViewEncapsulation**} from '@angular/core';

@Component({
  selector: 'app-myapp',
  templateUrl: './myapp.component.html',
  styleUrls: ['./myapp.component.scss'],
  **encapsulation: ViewEncapsulation.None,**
})

Con esto se puede sobreescribir cualquier estilo CSS del componente hijo desde el padre. Espero que a alguien más le sirva.

¡Gracias a todos!

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.