call method in ngOnInit

Question

I am trying to call a method if a cookie is detected on page load. If detected, it should load my apps dark theme.

I'm using Angular 7 and 'ngx-cookie-service'.

I can switch themes fine, but cannot figure out how to automatically switch theme when the cookie is detected.

Here is the code for my theme switching service:

import { Injectable, OnInit } from '@angular/core';
import { Subject } from 'rxjs';

// Import Services
import { CookieService } from 'ngx-cookie-service';

@Injectable()
export class ThemeSwitchService implements OnInit {

  constructor( private cookieService: CookieService ) { }

  private _themeDark: Subject<boolean> = new Subject<boolean>();

  isThemeDark = this._themeDark.asObservable();

  ngOnInit(): void {
    const cookieValue: string = this.cookieService.get('DarkTheme');
    if (cookieValue === 'True') {
      setDarkTheme();
      console.log('Dark theme active.')
    }
  }

  setDarkTheme(isThemeDark: boolean) {
    this._themeDark.next(isThemeDark);
    if (isThemeDark) {
      this.cookieService.set('DarkTheme', 'True');
      console.log('Dark theme activated.')
    } else {
      this.cookieService.delete('DarkTheme');
      console.log('Dark theme deactivated.');
    }
  }
}

My hope was to be able to call the theme switching method within ngOnInit, but I can't seem to get it working. This error shows in terminal: ERROR in src/app/core/services/theme-switch.service.ts(20,7): error TS2663: Cannot find name 'setDarkTheme'. Did you mean the instance member 'this.setDarkTheme'?

Please console log your cookieValue variable. it has value or not. — shubham chhapre, Mar 02 '19 at 12:54
The cookie is set and shows up in the inspector, but it won't log the cookieValue to console — lckdwn, Mar 02 '19 at 12:58
It returns this error in terminal: `ERROR in src/app/core/services/theme-switch.service.ts(17,18): error TS2693: 'string' only refers to a type, but is being used as a value here. src/app/core/services/theme-switch.service.ts(18,9): error TS2304: Cannot find name 'cookieValue'. src/app/core/services/theme-switch.service.ts(19,19): error TS2304: Cannot find name 'cookieValue'. src/app/core/services/theme-switch.service.ts(20,7): error TS2663: Cannot find name 'setDarkTheme'. Did you mean the instance member 'this.setDarkTheme'?` — lckdwn, Mar 02 '19 at 13:01

shubham chhapre · Accepted Answer · 2019-03-02T13:16:05.757

0

ngOnInit(): void {
    let cookieValue: string = this.cookieService.get('DarkTheme');
    if (cookieValue === 'True') {
      this.setDarkTheme(true);
      console.log('Dark theme active.')
    }
  }

Please add this code and check again.

edited Mar 02 '19 at 13:16

answered Mar 02 '19 at 13:04

shubham chhapre

296
1
14

I get this error in terminal: `ERROR in src/app/core/services/theme-switch.service.ts(19,7): error TS2554: Expected 1 arguments, but got 0.` – lckdwn Mar 02 '19 at 13:06
could you please show me theme-switch.service.ts file? – shubham chhapre Mar 02 '19 at 13:11
This is that file. The terminal error is with the this.setDarkTheme() in ngOnInit() – lckdwn Mar 02 '19 at 13:12
Yep, the theme switching works, it just isn't activating it if the cookie is there – lckdwn Mar 02 '19 at 13:14
this.setDarkTheme(true); add this line in place of this.setDarkTheme(); – shubham chhapre Mar 02 '19 at 13:15
That doesn't return the terminal error, but will not activate the dark theme on page load – lckdwn Mar 02 '19 at 13:16
console.log cookieValue variable and tell me the response – shubham chhapre Mar 02 '19 at 13:16
from where you are setting cookie value? – shubham chhapre Mar 02 '19 at 13:19
The cookie is set with `this.cookieService.set('DarkTheme', 'True');` in setDarkTheme(). Then cookieValue is set with: `let cookieValue: string = this.cookieService.get('DarkTheme');` – lckdwn Mar 02 '19 at 13:21
this code will work after condition will true, i am asking first time when application will run? – shubham chhapre Mar 02 '19 at 13:23
Please share full code zip file. will check and fix issue soon – shubham chhapre Mar 02 '19 at 13:28
I'm trying to check for the value of the cookie stored in the users browser, which is set in `setDarkTheme()`. The cookie gets set perfectly fine. The code in ngOnInit is trying to check on page load, if that cookie is there, so that dark mode is activated. Currently as soon as the page is refreshed, dark mode is deactivated. – lckdwn Mar 02 '19 at 13:28
What happened ? – shubham chhapre Mar 02 '19 at 13:35
I move the ngOnInit code to my navigation component (Where the user can toggle dark theme on and off) and it now works. – lckdwn Mar 02 '19 at 13:44
please share file without node_module folder. – shubham chhapre Mar 02 '19 at 13:44
Thanks for the help! – lckdwn Mar 02 '19 at 13:47

call method in ngOnInit

1 Answers1