?
Solved

Pass data between components in angular 1.5

Posted on 2016-09-30
10
Medium Priority
?
729 Views
Last Modified: 2016-10-09
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
0
Comment
Question by:ksd123
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41824718
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
 
LVL 27

Assisted Solution

by:BigRat
BigRat earned 1000 total points
ID: 41824878
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
 

Author Comment

by:ksd123
ID: 41824911
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41824956
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
 

Author Comment

by:ksd123
ID: 41825071
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
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41825171
And the solution posted in the link you presented in your OP - can you explain what is missing in terms of using that.
0
 
LVL 27

Assisted Solution

by:BigRat
BigRat earned 1000 total points
ID: 41825460
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
 

Author Comment

by:ksd123
ID: 41825480
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
 
LVL 83

Accepted Solution

by:
leakim971 earned 1000 total points
ID: 41825668
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
 

Author Closing Comment

by:ksd123
ID: 41835968
thank you all for your valuable suggestions
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question