How do I change the value in navbar whenever there is a change in value in page component without reloading the whole page?

I get a certain value from a component and I'm saving it in the local storage. 

page.component.ts

```
  getValue() {
    this.http.get(url)
        .subscribe(response => {
          this.value = response.value;
          localStorage.setItem('value', this.value);
        }
      );
    }

```

And I'm getting the value in navbar component that is saved in local storage like this: 
navbar.component.ts

```
  export class NavbarComponent implements OnInit {

    constructor(private router: Router, private http: HttpClient) {

      this.value =  localStorage.getItem('value');
        console.log(this.value);

      }
 }

```

The console log of the value in navbar does not change even when the value changes. It is changing only when the whole page is reloaded.