1

I want to be able to change the stylesheet in the <link> element through Angular2 (say, style2.css). Given that the element is not part of the <ng2-app> element (the part that Angular2 manipulates), is this possible?

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <ng2-app>

    <div class="loading">Loading&#8230;</div>
    <div style="text-align: center;clear: both;" class="md-headline">Application Loading....</div>

  </ng2-app>

</html>
zer0
  • 4,657
  • 7
  • 28
  • 49

1 Answers1

1

Angular 2 is using view Encapsulation to regulate how the stylesheets interact with each other.

 @Component({
 selector:'my-app'
 templateUrl:'card.html',
 styleUrls: ['stylesheet.css'],
 encapsulation: ViewEncapsulation.Native
 //encapsulation: ViewEncapsulation.None
 //encapsulation: ViewEncapsulation.Emulated is default 
})

To change the global stylesheet:

plunker

style(){

var link = document.getElementsByTagName("link")[0];
console.log(link.href);
link.href = "style2.css"; // or something else
console.log(link.href);

}
KB_
  • 2,113
  • 2
  • 26
  • 28
  • I want to change the stylesheet globally by manipulating `` and without loading all CSS in ` – zer0 May 09 '16 at 19:11