Error: Implement Theme in Angular 2 App using external CSS

dimanche 19 juin 2016

Implement Theme in Angular 2 App using external CSS

Trying to implement an Angular 2 App in which I am selecting a Theme from drop down list and as soon as I pick new theme- Theme of the whole app should change

I am thinking about storing theme name(sea.css) in local storage and replace with current theme(amber.css) but problem is

Theme associated with the whole app is placed in main - index.html file and so no way to replace it make it variable

Trying to find out a workaround to implement this feature.

App Structure is

index.html

<html>
  <head>

    <base href="/">  
    <title>Workshop Scheduler </title>
    <meta charset="UTF-8">
    <!--Related Stylesheets-->

    <link rel="stylesheet" href="resources/styles/plugins.css">
    <link rel="stylesheet" href="resources/styles/main.css">

    <!-- **This theme is applied to the whole app**     -->

    <link rel="stylesheet" href="resources/styles/fire.css">

    <link rel="stylesheet" href="resources/styles/themes.css">


    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- Configure SystemJS -->    
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app/main.js')
            .catch(function(err){ console.error(err); });
    </script>
  </head>
  <body>

        <app-start>Loading...</app-start>

  </body>
</html>

app.component.ts

import { Component } from '@angular/core';    
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';    
import { SettingComponent } from './SettingComponent/setting.component';

@Component({
  selector:'app-start',
  template:`
    <router-outlet></router-outlet>
  `,
  directives : [ROUTER_DIRECTIVES],
  providers  : [ROUTER_PROVIDERS]

})

@RouteConfig([
  {
      path : '/setting', name:'Setting', component:SettingComponent
  } 
])

export class AppComponent{

}

setting.component.ts

import { Component } from '@angular/core';    

@Component({
    moduleId    : module.id,  
    selector    : 'setting',
    templateUrl : 'setting.component.html',
    styleUrls   : ['setting.component.css'],
})

export class SettingComponent implements OnInit{
    errorMessage : string;

    constructor(private _router:Router){}

    ngOnInit(){
        this.pageInit();    
    }

    changeTheme(theme:string){
        console.log(theme);
    }

    pageInit(){
        this.userData = JSON.parse(sessionStorage.getItem('user'));
    }    
}

setting.component.html

 <div id="page-wrapper">
    <div id="page-container" class="sidebar-partial sidebar-visible-lg sidebar-no-animation">

        <div id="main-container">
            <div id="page-content">    
                <ul class="breadcrumb breadcrumb-top">
                    <li>Manage</li>
                    <li><a href="">My Settings</a></li>
                </ul>

                <div class="block full">
                    <div class="block-title">
                        <h2><strong>Settings</strong></h2>
                    </div>
                    <div class="form-horizontal form-bordered">
                        <div class="form-group">
                            <label class="col-xs-3 control-label">Username</label>
                            <div class="col-xs-9">
                                <p class="form-control-static">{{userData.fName}} {{userData.lName}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-3 control-label testColor" for="user-settings-email">Email</label>
                            <div class="col-xs-9">
                                <p class="form-control-static">{{userData.email}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-3 control-label" for="inputTheme">theme</label>
                            <div class="col-xs-9">
                                <select class="form-control" name="inputTheme" id="inputTheme" (change)="changeTheme($event.target.value)">
                                    <option value="ocean.css">Ocean</option>
                                    <option value="main.css">Main</option>
                                    <option value="fire.css">Fire</option>

                                </select>
                            </div>
                        </div>
                </div>
            </div>            
        </div>
    </div>
 </div>

Error

dimanche 19 juin 2016

Implement Theme in Angular 2 App using external CSS

Aucun commentaire:

Enregistrer un commentaire