CSS styles not applying on innerHTML

user_17960636 0
Viewed 472

I'm displaying a bootstrap card with innerHTML in my TS file but the styles are not applying to this content, I think maybe is because styles are loaded before the componet displays the card so the styles are not working, any advice on this? I'm using Angular 12

my TS code:

    constructor(private _route: ActivatedRoute, private router: Router) {

    this.noticias = [
      {
        id: '1',
        vTitulo: 'Convención anual de la Asociación Mexicana de Semilleros (AMSAC)',
        dFecha: 'DIC 2021'
      },
      {
        id: '2',
        vTitulo: 'El “Arroz Auténtico Americano”',
        dFecha: 'DIC 2021'
      },
      {
        id: '3',
        vTitulo: 'Se incrementa balanza comercial agroalimentaria',
        dFecha: 'DIC 2021'
      },
      {
        id: '4',
        vTitulo: 'Ciencia e innovación en el campo, clave para evitar escasez de alimentos en 2050: Bayer',
        dFecha: 'DIC 2021'
      },
      {
        id: '5',
        vTitulo: 'Corteva es reconocido por “Mejor programa de voluntariado”',
        dFecha: 'DIC 2021'
      }
    ]

     
     $.when( $.ready ).then(() => {
      
      const noticiasList = document.getElementById('noticiasList');

      let displayNoticias = (noticias: any[]) => {
        const htmlString = noticias
          .map((noticia) => {
            return `
              <div class="card cardNoticias">
                <div class="d-flex position-absolute top-0 end-0">
                  <h5 class="mb-0 fecha text-uppercase">${noticia.dFecha}</h5>
                </div>
                <div class="card-body card-body-noticiasList text-center d-flex align-items-center justify-content-center">
                  <h4 class="card-text fw-bold mt-3">${noticia.vTitulo}</h4>
                  <a href="" class="stretched-link"></a><!--Dentro del href se pondria el link hacia el articulo-->
                </div>
              </div>  
            `
          })
          .join('');
        
        if(noticiasList) noticiasList.innerHTML = htmlString;  
      }


      let filtradoNoticias = this.noticias.filter((noticia) => {
        return (
          noticia.vTitulo.toLowerCase().includes(this.busqueda.toLowerCase())
        );
      })
      displayNoticias(filtradoNoticias); 
      
     }) 
  }

This is where I'm displaying the innerHTML

<div class="col-lg-12 ms-2 ps-lg-3 pe-lg-2 mt-2 mt-xl-2 mb-5">
    <h1>NOTICIAS ENCONTRADAS</h1>
    <div id="noticiasList">
      
    </div>
  </div>

And the styles I want to apply to the card

.noticiasList .cardNoticias{ 
  background-color: gray; 
}

.noticiasList .cardNoticias .card-body-noticiasList {
  width: 100%;
  padding-right: 30px;
}

.fecha {
  background-color: lightgray;
  margin-right: 1px;
  text-align: center;
  width: 30px;
}

Basically the ts gets a string the user wants to find and filter the title of the news and displays the ones that have the string in the title

angular typescript css html javascript
1 Answers

noticiasList is the id of the element, not a class assigned to the element.

So, to refer to that div in CSS you might want to use the # selector (used for IDs).

So your CSS snippet would end up like:

#noticiasList .cardNoticias{ 
  background-color: gray; 
}

#noticiasList .cardNoticias .card-body-noticiasList {
  width: 100%;
  padding-right: 30px;
}

.fecha {
  background-color: lightgray;
  margin-right: 1px;
  text-align: center;
  width: 30px;
}

For more information, take a look at take a look at https://www.w3schools.com/cssref/sel_id.asp

user_183123470
Related