Solved

Pass data between components in angular 1.5

Posted on 2016-09-30
10
433 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 57

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 250 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
Tutorials alone can't teach real engineering

So we built better training tools.

-Hands-on Labs
-Instructor Mentoring
-Scenario-Based Tests
-Dedicated Cloud Servers

All at your fingertips. What are you waiting for?

 
LVL 57

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 57

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 250 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 82

Accepted Solution

by:
leakim971 earned 250 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

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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…

729 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