Solved

Pass data between components in angular 1.5

Posted on 2016-09-30
10
103 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 52

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
 
LVL 52

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

947 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now