Pass data between components in angular 1.5

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?

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 .

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?

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).

And the solution posted in the link you presented in your OP - can you explain what is missing in terms of using that.

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 
}
}

Select allOpen in new window

thank you all for your valuable suggestions