CODEWITHSUNDEEP
javascriptangularangular2-templateangular2-forms
dixit thareja
dixit thareja

Reputation: 83

Angular JS 2.0 switch stylesheets based on User Input

How can I switch the stylesheets based on the button click in an AngularJS 2.0 application?

As right now I am including stylesheets on the head section of index.html page.

Upvotes: 0

Views: 233

Answers (2)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657666

@Component({
  selector: ...,
  template: ...,
  styles: [`
:host(:not(.some-class)) {
  border: solid 1px red;
}
:host(.some-class) {
  border: solid 3px green; 
}

`
]})
export class MyComponent {
  @HostBinding('class.some-class') isSomeClass = true;
}

Plunker example

Upvotes: 1

Thierry Templier
Thierry Templier

Reputation: 202216

I would leverage the ngStyle directive:

<h1 [ngStyle]="{'font-style': style, 'font-size': size, 'font-weight': weight}">
  Change style of this text!
</h1>
<div (click)="changeStyle()">Update style</div>

Updading the style, size values from a method (linked to a click event) will update your style:

export class SomeComponent {
  style = 'normal';
  weight = 'normal';
  size = '20px';

  changeStyle($event: any) {
    this.style = 'italic';
 }

Upvotes: 0

Related Questions