akveo / nebular

:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/nebular
MIT License
8.06k stars 1.51k forks source link

Getting @Output event emitters from wrapped component in Window modal #2548

Open ekundayo-ab opened 4 years ago

ekundayo-ab commented 4 years ago

Issue type

I'm submitting a ... (check one with "x")

Issue description

Current behavior: Currently, I can't seem to find a way to subscribe to (@Output) event emitters from the component passed into the window modal when it is being created, I can only pass in data through context but can't seem to find a way to subscribe to data passed from the wrapped component.

Expected behavior:

// component being passed into the window service modal
class PassedInComponent {
  @Output() onSomeAction = new EventEmitter();

  @Input() text;
}

// component where the modal is being called
const windowModal = this.windowService.open(
  PassedInComponent,
  { title: 'some title', context: { text: 'the-data' } },
);

windowModal.componentRef.instance.content.onSomeAction.subscribe((val) => {
  // being able to subscribe to "onSomeAction" and get its data to use
  console.log(val);
});

Steps to reproduce: As described in the expected behaviour above

Related code:

//

Other information:

npm, node, OS, Browser

Node: v14.9.0, 
npm: 6.14.8
OS: MacOS Catalina
Browser: Chrome

Angular, Nebular

Angular, Nebular Framework
Laikos38 commented 3 years ago

Hi! Any update on this feature? or at least a workaround :thinking:

AlexKuturkin commented 3 years ago

I did this. child component MapRouteComponent:

<button
      (click)="getEcaZones()"
    ></button>

 @Output() requestEcaZones = new EventEmitter();

   public getEcaZones() {
      this.requestEcaZones.emit();
  }

parent:

              <div style="display: flex">
                <h4 kendoWindowContainer>some</h4>
                <span
                  (click)="openMap()"
                ></span>
              </div>

                public openMap() {
    const windowRef = this.windowService.open({
      title: 'Map',
      content: MapRouteComponent,
      width: 1400,
      height: 1000,
      top: 200,
      left: 300,
    });
    const mapRouteInfo = windowRef.content.instance;

    mapRouteInfo.requestEcaZones
      .pipe(
        map(() => {
          // get eca data
        })
      )
      .subscribe(() => {
        setTimeout(() => {
        // to child component
          mapRouteInfo.eca = this.eca;
        }, 500);
      });
  }