trigger event from another event angular

Question

is it possible to trigger the

beforeDataSubmit

event from

selectionEndFun

function

<fusioncharts
#fusionChartId2
width="700"
height="400"
type="selectscatter"
dataFormat="json"
[dataSource]="dataSource"
(beforeDataSubmit)="beforeDataSubmitFunc($event)"
(selectionEnd)="selectionEndFunc($event)"

Answer 1

To trigger the beforeDataSubmit event from the selectionEndFunc event in Angular, you'll need to use the @ViewChild decorator to get a reference to the FusionCharts component in your component class. Then, you can call the beforeDataSubmit method on that reference to manually trigger the event. Below I have written the code

 import { Component, ViewChild } from '@angular/core';
    import { FusionChartsComponent } from 'angular-fusioncharts';
    
         @Component({
          selector: 'app-your-component',
          template: `
            <fusioncharts
              #fusionChartId2
              width="700"
              height="400"
              type="selectscatter"
              dataFormat="json"
              [dataSource]="dataSource"
              (beforeDataSubmit)="beforeDataSubmitFunc($event)"
              (selectionEnd)="selectionEndFunc($event)"
            ></fusioncharts>
          `,
        })
        export class YourComponent {
          dataSource: any = {}; // Replace this with your actual data source.
        
          @ViewChild('fusionChartId2', { static: false }) fusionChartComponent: FusionChartsComponent;
        
          // Your selectionEndFunc event handler
          selectionEndFunc(event: any) {
            // Do your logic here...
        
            // Now, trigger the beforeDataSubmit event manually
            this.beforeDataSubmitFunc(yourEventData);
          }
        
          // Your beforeDataSubmitFunc event handler
          beforeDataSubmitFunc(event: any) {
            // Do something when beforeDataSubmit event is triggered
          }
        }

By using the @ViewChild decorator to get a reference to the FusionCharts component, you can access its methods and properties, allowing you to trigger events programmatically.It will work :D

Answer 2

Use RxJS SUBJECT (~EventEmitter):import { Subject } from 'rxjs/Subject';

import { Subject } from 'rxjs/Subject';

class SomeService {
  private _subject = new Subject<any>();

  newEvent(event) {
    this._subject.next(event);
  }

  get events$ () {
    return this._subject.asObservable();
  }
}

The from your components, one can publish and one can subscribe

@NgModule({
  providers: [ SomeService ]
})
class AppModule {}

@Component()
class ComponentOne {
  constructor(private service: SomeService) {}

  onClick() {
    service.newEvent('clicked!');
  }
}

@Component()
class ComponentTwo {
  constructor(private service: SomeService) {}

  ngOnInit() {
    this.service.events$.forEach(event => console.log(event));
  }
}