CODEWITHSUNDEEP
cssangular
Ashish Gehlot
Ashish Gehlot

Reputation: 579

Angular : Style class on component tag

Is it possible to apply class or style like this on component ?

Element component

@Component({
  selector: 'app-element',
  templateUrl: './element.component.html',
  styleUrls: ['./element.component.scss']
})

Container component template

<app-element class="button"></app-element>

Global.css

.button {
  background :red;
}

Upvotes: 2

Views: 3780

Answers (1)

Saghi Shiri
Saghi Shiri

Reputation: 617

Yes it's possible. and another way is to use :host in your component style:

:host(.customClass) {
  background: blue;
}

Also You can directly add styles to your component like this:

 :host {
      background: blue;
 }

Or in your .ts file:

@Component({
   selector: 'your-component',
   template: 'your-component.html',
   host: {'class': 'customClass'}
})

You can read more about :host here.

Upvotes: 7

Related Questions