Call function from one component to another component Angularjs 2

Question

I want to pass value from one component to another component.

i.e., I need to pass value from Dashboard Component to Header Component

Here is my Dashboard Component

import{Component}from '@angular/core';
import { Header } from '../../layout/header.component';
export class Dashboard{
showAlert(id : any)
  {
      setItem(id);
  }
}

Here is my Header component

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'header',
  templateUrl: './header.component.html',
})
export class Header{   
  public setItem(id : any)
  {
    console.log('Exported value'+id)
  }
}

But it is always giving Cannot find setItem

What is the mistake i am doing and how can i fix this ?

Note : I am doing this in Angularjs 2

this is not really the appropriate way to extend or use components. But once you import the class it should be something like if its not a static class : (new Header).setItem(id) — mygeea, Jul 26 '17 at 13:02
You should read: https://angular.io/guide/component-interaction. You can also make `setItem` method static and call it like: `Header.setItem(id)` but be careful when using static methods (if you don't know what static means/does). — eko, Jul 26 '17 at 13:02

score 2 · Answer 1 · answered Jul 26 '17 at 13:53

If the element raises events, you can listen to them with an event binding. Refer to the angular doc https://angular.io/guide/template-syntax#event-binding for in depth knowledge.

Dashboard Component

import{Component}from '@angular/core';
import { Header } from '../../layout/header.component';
@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
})
export class Dashboard{
  @Output() setItemEvent  = new EventEmitter();

showAlert(id : any)
  {
      this.setItemEvent.emit(id);
  }
}

Header component

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'header',
  template: '<dashboard (setItemEvent)="setItem(param)"></dashboard>',
})
export class Header{   
  public setItem(id : any)
  {
    console.log('Exported value'+id)
  }
}

In the above example we are inherting dashborad template: '',. If I do not want to inherit the Dashboard template and want to call the dashboard function. Is it possible? — Techiemanu, May 07 '19 at 08:54

Ninad Gaikwad · Answer 2 · 2017-07-26T13:09:44.523

1

You can use:

localStorage.setItem('name', 'value');

where name is the variable name you will use to access the value. You can access the value using:

var x = localStorage.getItem('name');

edited Jul 26 '17 at 13:09

answered Jul 26 '17 at 13:04

Ninad Gaikwad

4,272
2
13
23

"**need** to use" is a pretty strong statement... – AT82 Jul 26 '17 at 13:06
I'm new here :-( – Ninad Gaikwad Jul 26 '17 at 13:10
No problem, just wanted to point that out. But still, this is not really working "real time". This fetches the data just once initially, right? :) – AT82 Jul 26 '17 at 13:11
No it sets the data to variable "name". I am using localstorage to set values in login component (like token, username, phone etc) and then fetching this in multiple components wherever I need it. – Ninad Gaikwad Jul 26 '17 at 13:15
Yes, but this all depends. Based on your answer we have to assume there is not a child parent interaction here, then this answer works :) – AT82 Jul 26 '17 at 13:17

score 0 · Answer 3 · answered Jul 26 '17 at 13:06

You can use event-binding like this :

////First Component
@component({
  selector:'componentA',
})
export class ComponentA{
  yourMethod(yourPassedParameter:any){...}
}

////// Second Component
@component({
  selector:'componentB',
  template: `<button (click)="yourMethod(yourParameter)">click</button>`
)
export class ComponentB{
  @Output() eventLis = new EventEmitter();
  yourMethod(yourParameter:any){...
    this.eventLis.emit(yourData);
  }
}

////Your crosscomponent

@component({
  selector:'crosscomponent',
  template: `<componentA #componentA></componentA>
  <componentB (eventLis)="componentA.yourMethod(yourParameter)"></componentB>`
)
export class crosscomponent{
}

Call function from one component to another component Angularjs 2

3 Answers3

Linked