Why my angular service variable is undefined?

Question

i've been trying to get a varaible from one component to another in my code and yet it returns undefined

my service

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

@Injectable({
  providedIn: 'root'
})
export class ColorService {

  public color : string;

  constructor() { }
}

My app module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { RouterModule, Routes } from '@angular/router';

import { ColorService } from './core/color.service';

import { UserComponent } from './user/user.component';
import { PublicComponent } from './public/public.component';

const routes : Routes = [
  {
    path: '',
    redirectTo: 'user',
    pathMatch: 'full'
  },
  {
    path: 'user',
    component: UserComponent
  },
  {
    path: 'public',
    component: PublicComponent
  },
  {
    path: '**',
    redirectTo: 'user'
  }
]

@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
    PublicComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [
    ColorService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

my user component

import { Component, OnInit } from '@angular/core';
import { ColorService } from '../core/color.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit {

  constructor(private color: ColorService) { }

  ngOnInit(): void {

  }

  colorit(){
    this.color.color = 'blue';
    console.log(this.color.color);
  }

}

and the component that should get the color string

import { Component, OnInit } from '@angular/core';
import { ColorService } from '../core/color.service';

@Component({
  selector: 'app-public',
  templateUrl: './public.component.html',
  styleUrls: ['./public.component.scss']
})
export class PublicComponent implements OnInit {

  constructor(private color: ColorService) { }

  ngOnInit(): void {

  }

  getColor(){
    console.log(this.color.color);
  }
}

yet, everytime that i try to get the color in the public component i get a undefined, even tought it's included within the providers of appModule

user_10230793 · Answer

For communicating from one component to another component, we can use @Input and @Output emitter properties.

you can update your code as below in PublicComponent.ts file:

import { Component, OnInit, Input } from '@angular/core';
import { ColorService } from '../core/color.service';

@Component({
  selector: 'app-public',
  templateUrl: './public.component.html',
  styleUrls: ['./public.component.scss']
})
export class PublicComponent implements OnInit {
  private _color = '';

  constructor(private color: ColorService) { }

  ngOnInit(): void {}

  @Input()
  set color(color: string) {
     this._color = color || '';
  }

  getColor(){
    console.log(this.color.color);
  }
}

Also, add the following line of code in PublicComponent.html file:

Please make the following changes and let me know if it works fine for you.

user_5643934 · Answer

Inside your component you have method called colorinit where as that method was not declared in the ngoninit lifecycle. So could you confirm whether that method your calling from the component html ?

If not please add that method name inside the lifecycle hook

Why my angular service variable is undefined?

2 Answers