0

I am trying to apply css to app.component.ts using :host property but it is not being applied. Css is applied but not in correct way

.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

Passionate Coder
  • 7,154
  • 2
  • 19
  • 44
  • Be aware that :host is in the stage of "working draft". So its not supported by all browsers yet. – JanRecker Feb 25 '20 at 17:08
  • :host(.active) is used to add styling to the component only when the component has an active class on it. – Ramana Feb 25 '20 at 17:19

2 Answers2

1

I'm not totally sure what exactly it is you're trying to accomplish (question is a bit vague). From my understanding, you're frustrated that the background-color isn't applying. If so, to fix this, add this to :host

display: block;
King Arthur the Third
  • 110
  • 2
  • 8
0

Change :host to .card-text or .card card-block in the CSS file.

Aleksandar Zoric
  • 1,343
  • 3
  • 18
  • 45
  • Ah sorry - misread it. Too late in the day. This may help though: https://stackoverflow.com/questions/49550113/angular-5-change-style-of-host-class-in-ts-file – Aleksandar Zoric Feb 25 '20 at 17:12
  • This is actually more useful: https://stackoverflow.com/questions/32853924/angular-2-how-to-style-host-element-of-the-component – Aleksandar Zoric Feb 25 '20 at 17:13