Angular 9 call function from another component

user_2753792 0
Viewed 12550

I have a component lets app-main which I'm already using it another component with its event emitter:

<app-dashboard (dateFrom)=OnDateFrom($event) ></app-dashboard>

In <app-dashboard> I have a function which is like this:

@Output() weatherResult= new EventEmitter<any>();

  SendWeatherResult(){

this.weatherResult.emit(results);
}

Now I need to call the SendWeatherResult function in my component

<app-dashboard (dateFrom)=OnDateFrom($event) //here i need to call this function></app-dashboard>

i want to call SendWeatherResult function in my app-main

angular
3 Answers

Explaination could be clearer, but maybe what you need is template variables:

<app-dashboard #appDashboard (dateFrom)=OnDateFrom($event)></app-dashboard>
<button (click)="appDashboard.SendWeatherResult()"> Send weather result</button>

If you want to use it from the component .ts, use viewChild:

@ViewChild('appDashboard', { static: false }) appDashboard: DashboardComponent;

callSendWeatherResult(): void {
this.appDashboard.SendWeatherResult()
}
user_126607730

There are a few ways to go about this but when I need multiple components to be able to communicate and synchronize data between them, I prefer to create a global service.

Stackblitz showing how this works.

weather.service.ts - Global service that can be accessed from any component.

import { Injectable } from "@angular/core";
import { BehaviorSubject, Observable } from "rxjs";

@Injectable({
  providedIn: "root"
})
export class WeatherService {
  private _weatherResult = new BehaviorSubject<any>(null);

  constructor() {
    this.methodToPopulateWeatherResult({ todayis: "sunny" });
  }

  weatherResult$(): Observable<any> {
    return this._weatherResult.asObservable();
  }

  methodToPopulateWeatherResult(report: any): void {
    this._weatherResult.next(report);
  }
}

app.component.ts - Shows how to access the weather results programatically using Observables.

import { Component, OnInit, VERSION } from "@angular/core";
import { distinctUntilChanged } from "rxjs/operators";
import { WeatherService } from "./weather.service";

@Component({
  selector: "my-app",
  template: `
    <h3>Output from app-main</h3>
    {{ report | json }}

    <app-dashboard></app-dashboard>
  `
})
export class AppComponent implements OnInit {
  report: any;

  constructor(private weather: WeatherService) {}

  ngOnInit() {
    this.weather
      .weatherResult$()
      .pipe(distinctUntilChanged())
      .subscribe((report: any) => {
        // Manipulate the updated weather report
        this.report = report;
      });
  }
}

dashboard.component.ts - Shows how to display the weather results directly in your template and a button to update the weather result globally.

import { Component, OnInit } from "@angular/core";
import { WeatherService } from "../weather.service";

@Component({
  selector: "app-dashboard",
  template: `
    <h3>Output from app-dashboard</h3>
    <p>
      {{ weather.weatherResult$() | async | json }}
    </p>
    <button (click)="weather.methodToPopulateWeatherResult({ todayis: 'rainy' })">
      Make it Rain
    </button>
    <button (click)="weather.methodToPopulateWeatherResult({ todayis: 'snowy' })">
      Make it Snow
    </button>
  `
})
export class DashboardComponent {
  constructor(public weather: WeatherService) {}
}
user_80615550

I hope I understood your question right.

I'm also new to angular but maybe this might work.


@Input()
SendWeatherResult(){

   return results;
}


<app-dashboard (dateFrom)=OnDateFrom($event)
               [(SendWeatherResult)]="saveReturnValueHere"></app-dashboard>
user_142885210
Related