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