how to implement inter component communication?

[Reza Razavipour]

I was not sure what to use for subject :(

Here is my scenario...

I have a number of dropdown lists and a "Run Query" button.

When the user clicks the button, it needs to create a final query by interrogating each dropdown list for their subset of the final query.

For instance, first dropdown list, the Name entry is selected and the second dropdown list, the Lastname is selected.

User clicks the query button. The final query will be select name, lastname from table.

How do I structure such inter component communication?

[Sander Elias]

Hi Reza,

I created a small repo just to understand I got your issue right. Is this the thing you are trying to do?

Regards

Sander

[Reza Razavipour]

Sander, 

you are amazing, thank you so much for the effort.

Your sample solves my question fully.

Now to a very new newbie question. After I clone your repo and navigate to the root directory, where package.json lives,

and I run npm install followed by ng serve, I get an error:

$ ng serve

You have to be inside an angular-cli project in order to use the serve command.

What am I doing wrong?

[Reza Razavipour]

I figured it, I changed the angular/cli to the newest version...

All is well.

-    "@angular/cli": "1.3.0-beta.1",

+    "@angular/cli": "^1.2.1",

[Reza Razavipour]

Hi Sander,

more questions for your sample.

As I read the code, I see you have one component only. The page only displays member variables of the component and the service associated with it. 

I should have been more detailed. 

How would you change the example to handle lets say we have 3 components: component1, component2, component3 independent of another. 

Component3 has a button. When this button is clicked, an http request needs to be made. component1 and component2 and component3 each will contribute to address and the get parameters of the http request.

Hope my scenario is clearer.

[Sander Elias]

Hi Reza,

Hmm, Somehow my earlier response to this got lost. Well, I need to type it up again then :)

I refactored the sample a bit, so it pushed all the "business" logic to where it belongs, inside the service. In your case you can do the same, and inject the service(s) where you need them. The sample has just 1 service, but you can have as many as you need. Also, remember, you can inject services into services. Ideally The components should have no logic at all. they are just there to hook up your view. 

Check the repo, to see the changes I did.

Regards

Sander

[Reza Razavipour]

Hi Sander, 

In the latest version of your code, the component and a corresponding service. Standard approach, very clean.

So the component is displaying data itself and from the service. 

How does that extrapolate to one component displaying data from number of other components? 

You are not implying all of the components having the same service injected? They components almost need to share the same "singleton" service.

Can you elaborate please?

[Sander Elias]

Hi Reza,

Yes, inject the same service in the components where you need them. They are indeed singletons. (hmm, yeah, not 100% technically but close enough!)

Do not forget, you can inject services in services, and make sure they don't grow into a unmaintainable mess!

There are more ways to get this done. ngrx(redux variant for angular) comes to mind. Observables, and some more solutions are also an option. However, I prefer simple solutions, as long as it's possible. In my book, the code that's easiest to debug, is the code not written. Less code wins. Perfection is only achieved if there is nothing left that can be removed ;)

Regards

Sander

[Reza Razavipour]

thanks again. Did not know about your book.

I am getting a copy of it in the next minute. 

I am assuming Amazon or other online services provide them.

Regards,
Reza

--
You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/QPN53q3VCNA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+unsubscribe@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Reza Razavipour]

Not finding your book.

Can you send a link please?

On Friday, July 21, 2017 at 8:41:39 AM UTC-7, Reza Razavipour wrote:

thanks again. Did not know about your book.

I am getting a copy of it in the next minute. 

I am assuming Amazon or other online services provide them.

Regards,
Reza