Pass data between components in angular 1.5

Hello Experts,

I am working on  components in Angular 1.5.  I have a requirement similar to this stackoverflow question

In the plunker I have two components Header and Main. If I click on List button (Header) , it is showing "list" text in the Main component. My question is instead of showing  simply "list" text it  should call API (getdata()) and show records in the Main component.I am little bit confused when / where to call getdata function in the Main component. Tried on init() function but the control is not coming to Main componet after button event happens at Header component.

Thanks in Advance
ksd123Asked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
you main and add component should be in the same scope... or at least add-comp should be child of main-comp.
the list of component is updated (add,remove,del,update) by the main-comp, I mean you call the service from main-comp and the list is in this scope not the child (add-comp)
0
 
Julian HansenCommented:
Not sure if I am understanding the question - but should you not use a Service to get your data and just inject that Service into the controllers of where you need to use them?
0
 
BigRatConnect With a Mentor Commented:
It all depends on what you call Header - implying top - and Main - which tends to imply top, but the basic idea is that Main should have access to a service to fetch the data and header should broadcat an event which Main, on scope initialization, has set up a listen on. Header would broadcast the event when say a button was pressed. This could mean several "sub"-screens being activated to load/reload their data.

For an introduction see https://sathyalog.wordpress.com/tag/example-for-scope-using-broadcast-and-on/ but there are many, many others on the web and in books. Just google $broadcast and $on for examples.
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
ksd123Author Commented:
I have something like this
<header-component><hearder-component> //company logo  and add icon
<main-component></main-component> // shows list of products
<add-component><add-component>// to add new product and save button

Initially I will load header and main component's (ie. I will show add icon and list of products to the user) and when user clicks on Add icon (header component)  I should load add component template to add new product.

My requirement is if user successfully adds new product from the add component, I should show newly added product to the  products list which is in main component.That means I should communicate to main component that there is a new product available and I need to call API to get LATEST data (using service) . Somehow main component should automatically call API whenever save button event  happens in add component .
0
 
Julian HansenCommented:
So if I understand you correctly you, what you are wanting is after you add a new product you want it to immediately show up in the product list in the main component.

How does BigRat's suggestion regarding a broadcast event that the main component picks up and uses to refresh the data list not satisfy what you want to do?
0
 
ksd123Author Commented:
we can achieve using broadcast and emit events but it has performance issues and also I am using angular 1.5 and I want achieve using bindings (input/output/two-way).
0
 
Julian HansenCommented:
And the solution posted in the link you presented in your OP - can you explain what is missing in terms of using that.
0
 
BigRatConnect With a Mentor Commented:
It would seem to me that the main component and the add component are two objects which always go together. The usual scenario for broadcast is from a top of screen object - like a menu bar - providing common services - like save whatever is in the middle of the screen, or copy selection to clipboard and so on. Here the "add" takes an object from a list and adds it to another list. Thus the two belong together. In which case they share the same controller. And hence the save button is linked to a function defined in this controller.
0
 
ksd123Author Commented:
Julian,

I have implemented similar to the stackoverflow example in my application, I am passing some flag (Boolean) from add component to main component ,if the flag is true , I have to call service to get latest data. I have init() function which is the starting point of controller but it's not working.

My question is how / where to call API in main component ?

function mainController()
{
init();

//initialisation stuff here
fucntion init() 
{
if flag==true{ callApi();} //not working 
}
}

Open in new window

0
 
ksd123Author Commented:
thank you all for your valuable suggestions
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.