Shared service not fetching data after redirect back to the same page in Angular 7 - angular7

Question

ngOnInit() {
this.sharedData.profileData.subscribe((data: any) => {
this.userDetails = data;
});
}
above code retrieve data when only page reloading. It gives me the old data when I redirect back to the same page after I add some data into the database from another component(page). If I reload the page, the service will give me correct data(Recent Data).
Ex -
scenario 1 - reload the home page
home page shows data = skills(Software Developer", "Photographer")
skills: (2) ["Software Developer", "Photographer"]
scenario 2 - redirect to add skill page
scenario 3 - add a new skill(let's say Designer) and redirect back to
the home page component
scenario 4 - show only the old data
data = skills(Software Developer", "Photographer")
skills: (2) ["Software Developer","Photographer"]
Error - It's not showing newly added skill(Designer)
It Should be skills: (3) ["Software Developer", "Photographer",Designer]
Shared Data Service tsfile
import { Injectable } from '#angular/core';
import { BehaviorSubject } from 'rxjs';
#Injectable()
export class SharedDataService {
private profileDataSource = new BehaviorSubject('');
profileData = this.profileDataSource.asObservable();
private publicProfileDataSource = new BehaviorSubject('');
publicProfileData = this.publicProfileDataSource.asObservable();
private skillDataSource = new BehaviorSubject('');
skillData = this.skillDataSource.asObservable();
constructor() { }
updateProfileData(data: any) {
this.profileDataSource.next(data);
}
addSkillData(data: any) {
const emitDataObj: any = {
type: 'ADD',
data: data
};
this.skillDataSource.next(emitDataObj);
}
updateSkillData(data: any) {
const emitDataObj: any = {
type: 'UPDATE',
data: data
};
this.skillDataSource.next(emitDataObj);
}
updatePublicProfileData(data: any) {
this.publicProfileDataSource.next(data);
}
}