angular empty var using shared service between components

I'm having problems when I need to use some data between components in an Angular project. I read that using a shared data service is a good option to do it so I'm trying to implement this but I can't.

In the beginning of the project I'm getting some categories from a http request. these categories need to be used in the header and in the body of the project. So I'm getting the categories in the app.component.ts

constructor(
public _categoryService: CategoryService,
private _dataService: DataService
){
this.getCategories();
}

getCategories(){
this._categoryService.getCategories().subscribe(
response => {
if(response.status == 'success'){
this.categories = response.categories;
this._dataService.setCategories(this.categories);

let categories = this._dataService.getCategories();
console.log(categories);
}
},
error => {
console.log(<any>error);
}
);
}


app.component.html

<app-header [categories]="categories"></app-header>

<!-- CONTENT -->
<router-outlet></router-outlet>

<app-footer></app-footer>



In the header I'm listing the categories without problem. But I want to list them in the categories page component. I can't add the categories in the that's why I'm using the _dataService.

But when I click in the categories routerlink

// ROUTES DEFINITIONS
const appRoutes: Routes = [
{ path: '', component: PageHomeComponent },
{ path: 'categories', component: PageCategoriesComponent },
];


I can't get the categories in the PageCategoriesComponent

constructor(
private _dataService: DataService
) { }

ngOnInit() {
let categories = this._dataService.getCategories();
console.log(categories);
}


In the Chrome console I'm seeing how the first console.log is that of the page-categories-component with null value and the second console.log is that of the app.component with all the categories.

Please, can someone explain me what is happening?

EDIT I've added a button in the page-categories.component.html to be sure the request in the app.component has finished and the categories are loaded in the dataService, But it still returns an empty array

<button (click)="clickButton()">get categories</button>


page-categories.component.ts

clickButton(){
this._dataService.getCategories().subscribe((data) => {
this.categories = data;
console.log(this.categories);
});
}


SOLUTION I've added this in the DataService:

@Injectable({
providedIn: 'root',
})
export class DataService {
private bSubject = new BehaviorSubject([]);

getCategories() {
return this.bSubject.asObservable();
}

setCategories(value: any) {
return this.bSubject.next(value);
}
}


And also I removed the DataService from the providers in the component

@Component({
selector: 'app-page-categories',
templateUrl: './page-categories.component.html',
styleUrl: './page-categories.component.css',
providers: []
})

Continue reading...