Communication between app module and lazy loaded modules in angular 4

Question

I have a layout page (component) in app module where I display a title text. I have another lazy loaded module where I have button on click of which I am changing the text value.

I provided service in app.module only and injected in layout component as well as the component of lazy loaded module. On button click, I am updating the value of societyName of the service in component of lazy loaded module.

I tried below approach:

import { Subject } from 'rxjs/Subject';
@Injectable()
export class DataSharingService {   
     private societyName = new Subject<string>();
     societyNameObservable$ = this.societyName.asObservable();
     updateSocietyName(societyName: string) {
        this.societyName.next(societyName);
    }
}

Subscription is not happening in layout page.

this.dataSharingService.societyNameObservable$.subscribe(value=>{
      console.log(value);
    })

So, far I found solution for non-lazy loaded modules. If anyone have any idea,let me know. Thanks in advance.

I want to switch the society Name on click of switch button. Switch page is part of lazy loaded module and Keerthi Gardenia text is coming from layout page which is part of app module. Currently I am achieving this by doing page reload which is not a best option.

If you have an app complex enough to have lazily loaded modules, you might consider using NGRX for inter-module-communication. With NGRX you can create so-called stores and reducers (functions to update the stores) on a global level for top-level modules or make the stores/reduces lazily loaded (on URL navigation) too for sub-modules inside a module. For more info check out github.com/ngrx/example-app — Phil
– Phil, Commented May 3, 2018 at 16:26
But for a quick and dirty solution, maybe this answer can help you out? stackoverflow.com/a/42866725/4125622 — Phil
– Phil, Commented May 3, 2018 at 16:27
i think you have the problem because you have 2 different service instances — Fateh Mohamed
– Fateh Mohamed, Commented May 3, 2018 at 16:27
the scenario you have shared works fine with lazy-loaded module. check stackblitz.com/edit/…. Can you share some working code on stackblitz ? — Shashank Vivek
– Shashank Vivek, Commented May 3, 2018 at 16:36

Franklin Pious · Accepted Answer · 2018-05-04 13:51:24Z

1

Does this work for you.?

export class DataSharingService {   
     private societyName = new Subject<string>();

     updatedSocietyValue() {
       return this.societyName.asObservable();
     }

     updateSocietyName(societyName: string) {
        this.societyName.next(societyName);
    }
}

Layout page

  this.dataSharingService.updatedSocietyValue().subscribe(value=>{
      console.log(value);
    })

answered May 4, 2018 at 13:51

Franklin Pious

3,9083 gold badges29 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nabin Kumar Khatiwada Over a year ago

Thanks . problem was i was providing service twice .

Collectives™ on Stack Overflow

Communication between app module and lazy loaded modules in angular 4

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related