I am attempting to add CSS styles to app.component.ts using the :host property, but I am not seeing the desired results. The CSS is being applied, but not correctly.
.ts
export class AppComponent {
title = "Default Title"
data = 'This is default data'
@HostListener('mouseover') displayMessage(){
this.title = "Updated Title"
this.data = 'This is updated data'
}
@HostListener('mouseout') displayMessage2(){
this.title = "Default Title"
this.data = 'This is default data'
}
}
.html
<div class="card card-block">
<h4 class="card-title">{{title}}</h4>
<p class="card-text">
{{data}}
</p>
</div>
.css
:host {
background-color: red;
border : 1px solid black;
}
Link
https://stackblitz.com/edit/angular-hzu2zm?embed=1&file=src/app/app.component.css