Programmatically change themein Angular 4

[Me]

Hello,

How can I programmatically change Theme in Angular 4?

[Subha Shree Ramanathan]

Hi Me, 

Thanks for contacting Syncfusion Support. 

Based on theme selection, we can dynamically replace the corresponding theme file (ej.web.all.min.css) referred in index.html file. Refer to the below code snippet to change the theme. 

[app.component.ts] 

  updateLinkTag(theme) { 

    jQuery('body').fadeOut(0); 

    this.links = jQuery(document.head || document.getElementsByTagName('head')[0]).find("link"); 

    for (let i = 0; i < this.links.length; i++) { 

      if (this.links[i].rel='nofollow' href.indexOf("ej.web.all.min.css") != -1) { 

        this.links[i].rel='nofollow' href = "node_modules/syncfusion-javascript/Content/ej/web/" + theme + "/ej.web.all.min.css"; 

      } 

    } 

    jQuery('body').fadeIn(100); 

  } 

Here we rendered the ejDropDownList to list the needed themes. While selecting the theme in dropdownlist, we changed the theme in index.html file. 

[app.component.html] 

<div class="dropdownclass"> 

        <input id="dropdown" ej-dropdownlist [dataSource]="data" [fields]="fieldsvalues" [(value)]="value" (select)="selectlist($event)" [selectedIndex]=1 /> 

</div> 

For your convenience we prepared the sample to achieve the requirement. 

Sample 

Please let us know if you need further assistance on this. 

Thanks, 

Subha Shree D.R