Solved

Pass data between components in angular 1.5

Posted on 2016-09-30
10
68 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 51

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
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
Comment Utility
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 51

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
thank you all for your valuable suggestions
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

762 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

9 Experts available now in Live!

Get 1:1 Help Now