It seems like Angular is expecting me to use single quotes for the class names even if there are no hyphens in my CSS class name. I've tried everything but Angular keeps insisting on using hyphens for this specific CSS class... it's strange, or maybe I'm missing something?
Here is a snippet of my HTML template file:
<div [ngClass]="'box'">
<header [ngClass]="header">{{header}}</header>
<ng-content [ngClass]="body"></ng-content>
<footer [ngClass]="footer">{{footer}}</footer>
</div>
And here is a glimpse of my CSS file:
.box{
border: 1px black solid;
background-color:yellow;
}
.footer{
background-color: green;
}
.header{
background-color: green;
text-align: center;
}
Finally, here's a portion of the component file:
import {Component,Input,Output} from '@angular/core';
@Component({
selector:'message-box',
templateUrl: './error.component.html',
styleUrls: ['./error.component.css']
})
export class ErrorComponent {
@Input() header:string = 'header from child';
@Input() footer:string = 'footer from child';
}