I'm facing an issue where the styles I try to apply to a div generated using TypeScript's createElement function are not taking effect.
UPDATE: After some troubleshooting, I was able to resolve the issue by adding the style in the global project file style.scss. However, I am still curious as to why it didn't work in the component's scss file.
component.ts
export class Component implements OnInit {
bgAnimation!: any;
numberOfColorBoxes = 400;
ngOnInit(): void {
this.bgAnimation = document.getElementById('bgAnimation');
for (let i = 0; i < this.numberOfColorBoxes; i++) {
const colorBox = document.createElement('div');
colorBox.classList.add('colorBox');
this.bgAnimation.appendChild(colorBox);
}
}
}
component.html
<div class="bgAnimation" id="bgAnimation">
<div class="backgroundAmim"></div>
</div>
component.scss
.colorBox {
z-index: 2;
filter: brightness(1.1);
transition: 2s ease;
position: relative;
margin: 2px;
background: #1d1d1d;
}