CODEWITHSUNDEEP
cssangulartypescriptangular2-template
jcdsr
jcdsr

Reputation: 1151

Using ngStyle on the body tag on the main index.html in angular 2

I couldn't find a way to use ngStyle on the index.html in the body tag using angular 2.

like on index.html:

  <body ngStyle="bodyStyle">
    Demo text
  </body>

The only way I found is using "encapsulation: ViewEncapsulation.None" in the component, however, only works using standard css class but not using a variable or function as ngStyle,

Like, on the component styles:

body {
      background: red;
   }

I also found something similar on angularjs as the link below.

http://plnkr.co/edit/7cwAeGMsCYA8HIrWbl7d?p=preview

Is possible to have the same result in angular 2 as the link above ?

Upvotes: 1

Views: 1471

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657741

There is no way to do that. ngStyle only works in the template of an Angular component. <body> can't be inside a components template.

You can use https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style instead.

Another way would be to use 'body' as selector of your AppComponent and apply styles using @HostBinding()

@Component({
  selector: 'body',
  ...
})
export class AppComponent {
  @HostBinding('style.background-color') 
  backgroundColor:string = 'red';
}

Upvotes: 3

Related Questions