We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Programmatically change themein Angular 4

Thread ID:

Created:

Updated:

Platform:

Replies:

132178 Aug 18,2017 02:08 AM Aug 18,2017 07:22 AM Angular 1
loading
Tags: General
Me
Asked On August 18, 2017 02:08 AM

Hello,

How can I programmatically change Theme in Angular 4?

Subha Shree Ramanathan [Syncfusion]
Replied On August 18, 2017 07:22 AM

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. 


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

Thanks, 
Subha Shree D.R                                                                     


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;