Angular 4: calling a method from another component
I have 2 sibling components, I am making an HTTP request in one component, and if a certain condition occurs, it should make another HTTP request written by another component. Therefore, I would have to call the method in the first component.
this is the first component:
import { Component, OnInit, Inject } from '@angular/core';
import { Http } from '@angular/http';
import { SendCardComponent } from '../send-card/send-card.component';
@Component({
selector: 'app-input-field',
templateUrl: './input-field.component.html',
styleUrls: ['./input-field.component.css'],
})
export class InputFieldComponent implements OnInit {
value = '';
output = '';
@Inject(SendCardComponent) saro: SendCardComponent;
constructor(private http : Http) { }
onEnter(value: string) {
this.value = value;
this.http.post('http://localhost:5000/APIconversation/', {"val":value})
.map(response=>response.json())
.subscribe(
data => {
this.output = data.result.fulfillment.speech,
if(data.result.fulfillment.speech == 'test'){
saro.sendCard('done', '1' );
}
});
}
I'm trying to call sendCard () defined in sendCardComponent from InputFieldComponent that looks like this:
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'app-send-card',
templateUrl: './send-card.component.html',
styleUrls: ['./send-card.component.css']
})
export class SendCardComponent implements OnInit {
constructor(private http : Http) { }
ngOnInit() {
}
output = '';
sendCard(value:string, id:number){
this.http.post('http://localhost:5000/APIconversation/', {"val":value})
.map(response=>response.json())
.subscribe(
data => {
this.output = data.result.fulfillment.messages[1].payload.options[id].type = $('#'+(id+1)+'>span').html();
});
} //sendCard
}
I am getting an error when calling saro.sendCard:
[ts] cannot find the name 'saro'
What am I doing wrong?
source to share
Instantiate SendCardComponent to InputFieldComponent
import { Http } from '@angular/http';
import { SendCardComponent } from '../send-card/send-card.component';
export class InputFieldComponent{
//your other variables and methods
constructor(private http : Http) { }
let saro = new SendCardComponent(this.http);
saro.sendCard()
}
source to share
You have 2 problems for the address.
First, if you want to use Dependency Injection, your components must have a parent-child relationship. So in your case, if InputFieldComponent
is a child SendCardComponent
, you can use simple (constructor) dependency injection to get an instance of the parent SendCardComponent
from InputFieldComponent
.
And that brings us to the second question - implementation. If I wanted to do the above, I would end up with:
export class InputFieldComponent implements OnInit {
value = '';
output = '';
constructor(private http : Http, private saro: SendCardComponent) { }
onEnter(value: string) {
this.value = value;
this.saro.methodOnSendCardComponent();
......
If another relationship existed - where InputFieldComponent
is the parent SendCardComponent
, you can use @ViewChild
to get your instance SendCardComponent
from InputFieldComponent
.
However , as noted, both of the above methods require changing the view hierarchy. If the two components MUST stay as siblings, then none of the above steps will work.
Reflecting on this further, if you only need access to in SendCardComponent
order to use logic (i.e. methods) in it, why not abstract that logic for a service, and then you can use that service anywhere in your hierarchy? This gets around your real problem rather neatly and is sound advice in general. In all fairness, your components should focus their behavior on higher-level issues and "outsourcing" as much as reasonably can render services anyway.
source to share