Angular 4 Reload header component from separate component

Question

I have a function that will require a seperate header component to refresh when its used.

Foo Component (needs to reload header component)

handleTimeListChange(value) {
    this.cp = value.
    localStorage.setItem('cp', this.cp);

    //reload header.component
  }

The result should be when time handleTimeListChange is used a call will reload (header.component)

why do you want to reload header.component is there nay reason? — Chellappan வ, Jul 16 '18 at 17:39
I have some data in the header that will take the new setItem and refresh — Alex D, Jul 16 '18 at 17:41
currently if there is new data the header is not reflection on ui right? — Chellappan வ, Jul 16 '18 at 17:42
Please consider to provide a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) if possible, so we can see the problem in a "real" context. Maybe a https://stackblitz.com/? — lealceldeiro, Jul 16 '18 at 17:43
correct but if I can reload the component it will be able to take that newly set data. foo.component has handletimelistchange and header.component will need to reload when that item is set. — Alex D, Jul 16 '18 at 17:44
I think you don't need to reload the component, but just refresh the data. Isn't it? — lealceldeiro, Jul 16 '18 at 17:45
is there any relation between foo component and header component — Chellappan வ, Jul 16 '18 at 18:31

Ankit · Accepted Answer · 2018-12-13T08:24:19.117

For this problem you can use rxjs SubjectBehaviour.make random service like this

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

    @Injectable()
    export class RandomService {

      private msgsource = new BehaviorSubject<string>('this is the default');
      telecast = this.msgsource.asObservable();

      constructor() { }

      editMsg(newmsg) {
        this.msgsource.next(newmsg);
      }

    }

This component from which you want to send the data, declare that service method and and send the date to that method and where ever that service method is being called that data will reflect their.

      import { Component, OnInit, Input } from '@angular/core';
        import { RandomService } from '../random.service';

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

          @Input('incomingmsg') newrandmsg: string;

          message: string;
          editedmsg: string;

          constructor(private someserv: RandomService) { }

          ngOnInit() {
          }

          editthemsg() {
            this.someserv.editMsg(this.editedmsg);
          }

        }

now receive that data to header component in ngOnInit that will detect any value changes in that service method.

HEADER COMPONENT

ngOnInit() {
        this.someserv.telecast.subscribe(message => this.message = message);
      }

when ever any changes come under random service it will detect and show that data to header component.

score 0 · Answer 2 · answered Jul 16 '18 at 18:08

You can use a BehaviorSubject for communicating within different components throughout the app. You can define a data sharing service containing the BehaviorSubject to which you can subscribe and emit changes.

see this ans: https://stackoverflow.com/a/46049546/4899523

Angular 4 Reload header component from separate component

2 Answers2