I have a scenario where I am trying to display a Bootstrap card using innerHTML in my TS file, but the styles are not being applied to this content. I suspect that the issue might be because the styles are loaded before the component displays the card, causing them not to work properly. Does anyone have any advice on how to address this problem? My project is built on Angular 12.
Here is an excerpt of my TS code:
constructor(private _route: ActivatedRoute, private router: Router) {
// News data
this.noticias = [
{
id: '1',
vTitulo: 'Convención anual de la Asociación Mexicana de Semilleros (AMSAC)',
dFecha: 'DIC 2021'
},
{...}
]
// Logic for displaying news cards with filtered search functionality
$.when($.ready).then(() => {
const noticiasList = document.getElementById('noticiasList');
let displayNoticias = (noticias: any[]) => {
// Generating HTML for each news item
const htmlString = noticias
.map((noticia) => {
return `
<div class="card cardNoticias">
{...}
</div>
`
})
.join('');
// Rendering the news items
if(noticiasList) noticiasList.innerHTML = htmlString;
}
// Filtered search based on user input
let filtradoNoticias = this.noticias.filter((noticia) => {
return (
noticia.vTitulo.toLowerCase().includes(this.busqueda.toLowerCase())
);
})
displayNoticias(filtradoNoticias);
})
}
This is where I'm inserting 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 here are the CSS styles I want to apply to the news cards:
.noticiasList .cardNoticias{
background-color: gray;
}
.noticiasList .cardNoticias .card-body-noticiasList {
width: 100%;
padding-right: 30px;
}
.fecha {
{...}
}
In essence, the TypeScript code filters news titles based on user input and dynamically displays the relevant news cards.