How to call a function from a component in another component?

Question

My problem is that I have two components (lets call them comp1 and comp2) and I have to call the function show_it(list) in comp1 from comp2 with some data from comp2. So currently it works out if i trigger it easily with a button, which is implemented in comp2. But my intension is now, that i want to trigger the function of comp2 in comp1 by clicking a label with (click) event. Does anyone have a solution for my problem?

How I call comp1 and comp2 in my home.html:

 <comp1 [list]="lists" (emitList)="onListUpdate($event)"></comp1>
 <comp2 [list]="additionalInformationList"></comp2>

onListUpdate function of my home.ts:

onListUpdate(list: {item:string}[]){
    this.additionalInformationList=list;
    console.log(list);
}

My .html of comp1:

div>
<ion-list>
    <ion-item *ngFor="let list of list">
        <ion-label (click)="updateList(list)">{{list.item.free_text}}</ion-label>
        <ion-checkbox *ngIf="list.item.checkbox==true"  disabled="false"></ion-checkbox>
    </ion-item>
</ion-list>

My .ts of comp1:

@Component({
  selector: 'caiditems',
  templateUrl: 'caiditems.html'
})
export class CaiditemsComponent {
  transformedList=[];

  @Input()
  list = []; 

  @Output() 
  emitList = new EventEmitter<{item:string}[]>();

  constructor() {
    this.emitList.emit(this.list);
  }

  updateList(list) {
     if(list.item.additional_information!=null){
       this.transformedList=[
        {item: {id: list.item.id, free_text: list.item.free_text, checkbox: list.item.checkbox, additional_information: list.item.additional_information}}]
      console.log("not empty")
     }
     else{
       this.transformedList=[{item: {id: list.item.id, free_text: list.item.free_text, checkbox: list.item.checkbox, additional_information: ""}}]
       console.log("empty")
     }
     this.emitAdditionalinformations(this.transformedList);
     console.log('additional information list updated')
  }

  emitAdditionalinformations(transformedList){
    this.emitList.emit(this.transformedList);
    console.log('list emited');
  }

My .html of comp2:

<div>
  <button ion-button (click)="show_it(list)">show it to meeeeeee</button><br>
  <ion-label>{{additionalinformation}}<br><br></ion-label>
</div>

My .ts of comp2:

@Component({
  selector: 'caidadditionalinformations',
  templateUrl: 'caidadditionalinformations.html'
})
export class CaidadditionalinformationsComponent {
  additionalinformation="hi";

@Input()
list = []; 

constructor() {  
}

show_it(list){
  console.log(list);
  if(list[0].item.additional_information!=""){
      console.log(list[0].item.additional_information);
      this.additionalinformation=list[0].item.additional_information;
   }
  else{
      this.additionalinformation="no additional informations";
   }
}

could you provide your code in stackblitz project ?

shohrukh
– shohrukh

2018-08-31 09:30:53 +00:00
Commented Aug 31, 2018 at 9:30 — shohrukh
– shohrukh, Commented Aug 31, 2018 at 9:30

sebaferreras · Accepted Answer · 2018-08-31 10:04:15Z

1

From this code snipped:

 <comp1 [list]="lists" (emitList)="onListUpdate($event)"></comp1>
 <comp2 [list]="additionalInformationList"></comp2>

I'm assuming both comp1 and comp2 are children of the HomePage. When you click on a label from the comp1, the onListUpdate($event) method is executed in the HomePage, right?

You can get a reference of the comp2 component in the HomePage, and then call the show_it() method with that reference.

It'd be something like this:

@Component(...)
export class HomePage {

  // Get a reference of the component instance
  @ViewChild(CaidadditionalinformationsComponent) comp2: CaidadditionalinformationsComponent;

  onListUpdate(list: {item:string}[]){
    this.additionalInformationList = list;
    console.log(list);

    // Use the reference to call the public method
    this.comp2.show_it(list);
  }

}

Please let me know if this does not make sense in the context of your application, maybe creating a stackblitz project would help us to understand your specific scenario a little bit better.

There are some other ways to share data among components:

Using a shared service, where you can keep the data, and both components can read the data from there
Using Ionic events so that both components can publish/subscribe to changes in the data, without the need of the HomePage to be the mediator.

answered Aug 31, 2018 at 10:04

sebaferreras

44.7k11 gold badges120 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marcel Over a year ago

Exactly what I looked for! Worked out for me, thank you!

sebaferreras Over a year ago

Glad to hear that it helped @Marcel :)

Collectives™ on Stack Overflow

How to call a function from a component in another component?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related