4

I have this angular app which basically uses the concept of Libraries.

I have 2 libraries named Lib1 and lib2 grouped according to microservice to which they serve.

Now I import these libraries into the main app i.e. App1 and things was till now.

Now, Lib1 has a component UploadComponent which is responsible for Upload all types of media files video, image, Docs, etc. which works fine when used in the App1 independently by using the component selector or loading through a route.

Lib2 has a component CreateComponent which needs the upload functionality , so I import the UploadComponent and call it inside the modal window. But after the upload is done this component emits some message but I am unable to capture that because Createcomponent and UploadComponent are in different libraries.

Does anyone know how to handle this situation?

Sam
  • 163
  • 1
  • 11
  • You can implement pub-sub pattern for this. Create a service which will publish an event from anywhere and anyone can subscribe to that event. – Johar Zaman Apr 03 '19 at 04:34
  • Thanks @JoharZaman I have already Implemented pub-sub pattern in Lib1 where uploadComponent is located but its not possible to publish in Lib1 and subscribe in Lib2 . Could you share the code how cross library communication can happen using pub-sub pattern ? – Sam Apr 03 '19 at 04:41
  • You can create a service class and export its instance as variable so you can import it anywhere. For example: ```javascript export class EventsServiceFactory { constructor() { } } export const EventsService = new EventsServiceFactory(); ``` This way you can import EventsService anywhere. – Johar Zaman Apr 03 '19 at 04:50
  • EventsServiceFactory can have two functions `publish('name of event')` and `subscribe('name of event')`. What you can do is in uploadComponent when upload is completed you can publish an event (with name 'UploadCompleted') and you can subscribe to 'UploadCompleted' event in other component. – Johar Zaman Apr 03 '19 at 04:55
  • 1
    @JoharZaman but this approach will not work outside library – Sam Apr 03 '19 at 06:32

1 Answers1

1

There will be two different ways using which you can communicate through two different micro apps or called as angular libraries. Please follow the steps :-

  1. Suppose you have two library project working working under one angular app [users and staff]
  2. In staff.module.ts you need to import UsersModule in imports array.
  3. Then you can use in staff components HTML, where you can pass data to users app as below
  4. <users [listingFilterData]="filterObject"></users>
  5. In users component ts file, you can use @Input directive to get "listingFilterData" object data and process the data in user component and result will get updated under staff component.

Second way you have is to emit event from one Component which can be listen into another component or library module.

Dispatch event from one component :- 

 document.dispatchEvent(
  new CustomEvent(name, { detail: body })
);

Listen Event into another component

  document.addEventListener(name, handler);

Hope that helps.

jagjeet
  • 376
  • 4
  • 12