Pass parameter from page to app.component from dark mode

Question

Hello i use this git to enable dark mode to my project. https://github.com/ionic-team/ionic-conference-app

It works but i want to put the toggle button in a page and not to app.component.html

Dark theme works like that.

Toggle button in app.component.html

   <ion-app [class.dark-theme]="dark">
     <ion-split-pane contentId="main-content">
       <ion-item>
        <ion-icon slot="start" name="moon-outline"></ion-icon>
        <ion-label>
          Dark Mode
        </ion-label>
       <ion-toggle [(ngModel)]="dark"></ion-toggle>
       </ion-item>
     </ion-split-pane>
   </ion-app>

Set dark parameter to false so it could change in toggle

     export class AppComponent implements OnInit {
     dark = false;

      constructor(

So this works. And in case it works but only in the page not the whole project goes on dark only the page that i set the toggle. So i think that i have to pass parameter to app.component.ts?

I have added a new service Global Service

global.service.ts

   import {BehaviorSubject} from "rxjs";

    export class GlobalService {
       public darkModeToggleState = new BehaviorSubject(false);
       constructor(){}
     }

app.component.ts

      import { GlobalService } from './services/global.service/global.service';

      @Component({
       selector: 'app-root',
       templateUrl: 'app.component.html',
       styleUrls: ['app.component.scss'],
       providers: [GlobalService],
      })
      export class AppComponent implements OnInit {

      dark;

app.component.html that will change the class to dark

      <ion-app [class.dark-theme]="dark">
        <ion-router-outlet></ion-router-outlet>
       </ion-app>

somepage.html

      <ion-toggle *ngIf="index === 5" [(ngModel)]="dark" (ionChange)="darkToggled($event)"></ion-toggle>

somepage.ts

       import { GlobalService } from '../../services/global.service/global.service';
        
     constructor(){}

      darkToggled(event){
        this.globalSrvc.darkModeToggleState.next(event.target.chacked)
      }

Chetan Bansal · Accepted Answer · 2020-09-16 09:21:49Z

0

You can setup a BehaviourSubject to keep track of this toggle. Do it like this.

In your component html file

<ion-toggle [(ngModel)]="dark" (ionChange)="darkToggled($event)"></ion-toggle>

In your component .ts file

constructot(private globalSrvc:GlobalService){}
darkToggled(event){
   this.globalSrvc.darkModeToggleState.next(event.target.checked)
}

New service file, global.service.ts

export class GlobalService {
     public darkModeToggleState = new BehaviorSubject(false);
     constructor(){}
}

In your app.component.ts

dark;
constructor(private globalSrvc:GlobalService){
   this.globalSrvc.darkModeToggleState.subscribe(value=>{
       this.dark = value
   }
}

With this, you can add the dark mode toggle to multiple components, anywhere.

edited Sep 16, 2020 at 9:21

answered Sep 16, 2020 at 5:32

Chetan Bansal

1,94416 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user11625000 Over a year ago

i have updated so i can show what i did. No errors but when change the toggle nothing happens

Chetan Bansal Over a year ago

put breakpoint in you app.component.ts and see if this.dark value is updated when you toggle

user11625000 Over a year ago

you mean like this this.globalSrvc.darkModeToggleState.subscribe(value=>{ this.dark = value; console.log(value); }); returns false and when toggle returns undefined

user11625000 Over a year ago

Thanks man it works now. For future mention Chetan's answer works!!!

Collectives™ on Stack Overflow

Pass parameter from page to app.component from dark mode

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related