I am having trouble applying styles to a newly added "i" element as a child element to an HTMLDivElement. The styles set in the scss file are not being applied to the new element.
Is there a way to ensure that the same styles are applied to the newly added "i" element? I want to use the scss/css styles for the new element, rather than setting them through JS(TS) in the .ts file when inserting the element.
This is the code snippet from accommodation-view-data.html:
<div class="star-rating" #starRating>
<i class="bi bi-star-fill"></i> <!-- Styles are successfully applied to this element -->
</div>
Here are the styles set in accommodation-view-data.component.scss:
i{
font-size: 1.6rem;
padding: 0 0.25rem ;
color: #ffbe0f;
}
And here is the relevant TypeScript code from accommodation-view-data.component.ts:
import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
@Component({
selector: 'app-accommodation-view-data',
templateUrl: './accommodation-view-data.component.html',
styleUrls: ['./accommodation-view-data.component.scss']
})
export class AccommodationViewDataComponent implements OnInit, AfterViewInit {
@ViewChild('starRating')
starRatingElem!: ElementRef;
constructor() { }
ngOnInit(): void {
}
ngAfterViewInit(): void {
/* When appending the new element to the DOM,
* the styles defined in the scss file are not applied to the new element */
const starIconElement = document.createElement('i');
starIconElement.classList.add('bi');
starIconElement.classList.add('bi-star-fill');
(this.starRatingElem.nativeElement as HTMLDivElement).append(starIconElement);
}
}