So I've been working with Angular5 and I figured out how to bind an HTML element's style to a Boolean value. However, I'm struggling to find a way to do this for multiple styles simultaneously.
For example, I have this code snippet that works:
[style.background]="r.favourite === true ? '#3f51b5' : 'white'"
But now I also want to change the text color to white when r.favourite === true. I don't want to clutter my components with numerous [style.xxx] tags.
Is there a method to dynamically bind to a CSS class to apply when r.favourite === true?
I know there are ways to achieve this if you're binding within the same file as shown here:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<button class="my-btn" [class.extraclass]="someProperty">Call to Action</button>
`,
styles: [`
.my-btn { font-size:1.7em; }
.extraclass { background: black; color: white; }
`]
})
export class AppComponent {
someProperty = true;
}
However, in my case, the CSS is stored in a shared file so my project structure looks like this:
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
styleUrls: ['./css/shared-styles.css']
template: `
<button class="my-btn" [class.extraclass]="someProperty">Call to Action</button>
`
})
export class MyComponent {
someProperty = true;
}