service not updates the footer when change from home page

Question

I am updating the object value of service from once of the page. the value already added to footer component.

example:

footer component having it own value : view updates the value;
service updates the footer : footer view updates the value
home page updates the service value : footer view not updates

here is my footer:

import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { StorageService } from '../shared/service/storage.service';


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

    name:string = "Chennai"; //show the value

    constructor(private storage:StorageService) {
        this.name = storage.name;
    }

    ngOnInit() {}

}

Service:

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

@Injectable()
export class StorageService {

    socialNetworks:Object;
    name:string = "ArifSS"; //show the value

    constructor() {
        console.log('first');
    }

}

Home page:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from "@angular/router";
import { StorageService } from '../../shared/service/storage.service';

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

    data:any;
    socialLinkBase:any;

    constructor(private route: ActivatedRoute, private store:StorageService) { }

    ngOnInit() {
        this.setSocialNetworks(); //calling method to update
    }

    setSocialNetworks(){
        this.store.name = "New Value"; //not updating in footer.
    }

}