CODEWITHSUNDEEP
angular
Nabin Kumar Khatiwada
Nabin Kumar Khatiwada

Reputation: 1646

Communication between app module and lazy loaded modules in angular 4

enter image description hereI 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.

Upvotes: 0

Views: 1540

Answers (1)

Franklin Pious
Franklin Pious

Reputation: 3848

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);
    })

Upvotes: 1

Related Questions