I am currently experimenting with the use of [ngClass] in Angular and it appears that it is not being applied as expected. Interestingly, [ngStyle] for similar CSS styles is working without any issues. What could I be doing wrong in this scenario? There are no errors appearing in the console when I check. However, upon inspecting the dev tools, I can see that the classes are indeed being added to the element but they are not reflected in the browser view. I have attempted various options including 'class', '[class]', '[ngClass]', and 'ngClass'. Furthermore, I have also tried using both className and ngClass.
Please refer to the attached Plunker for more information:
https://plnkr.co/edit/ipMxdTzoHUl5YCPJSpLT?p=preview
@Component({
selector: 'aboutus',
template:`
<span class="classone classtwo">{{vari.title}}</span>
<br>
<div ngClass="['classone','classtwo']">{{vari.title}}</div>
<br>
<div [ngClass]="['classone','classtwo']">{{vari.title}}</div>
<br>
<div [className]="classdef">{{vari.title}}</div>
`,
styles: [`
.classone{
font-weight: 'normal' !important;
}
.classtwo{
font-size: '40px' !important;
}
`
]
})
export class AboutusComponent implements OnInit, OnDestroy {
vari: any = {title: 'test'}
classdef: any[] = ['classone', 'classtwo']
constructor() { }
}