0

Say i have 3 Angular components and first component uses the second and third component as a directive. They should share the same model object, which is initialized in the first component. How can I pass that model to the second and third component? I referred this post How to pass object from one component to another in Angular 2? but it is using inputs... I want to know all the possible alternatives to share the model object between various child components Somebody please tell me the alternatives which i can follow

Community
  • 1
  • 1
abhilash reddy
  • 1,546
  • 8
  • 31
  • 53

2 Answers2

1

Add the type to the providers list of the First component and inject it into the constructor of First, the involved child, and grandchild constuctors.

@Component({
  ...
  providers: [SharedService]
})
export class First {
  constructor(private shared: SharedService);
  // also add this parameter to the other child and grand-child 
  // component and directives constructors and they will get
  // passed a shared instance.
}

Don't add SharedService to any of those child or grand-childrens providers or they'll get a new instance instead of the shared instance.

If you add SharedService to bootstrap(AppComponent, [SharedService]) instead of the parent component, the whole application shares the seam SharedService instance instead of just a selected subtree.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thank you...I think this one is using Dependency injection right? – abhilash reddy Feb 02 '16 at 06:08
  • Yup, components, directives and services instantiated by Angular are instantiated by DI and also get the constructor arguments resolved and instantiated and passed in by DI. – Günter Zöchbauer Feb 02 '16 at 06:11
  • http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html, http://victorsavkin.com/post/126514197956/dependency-injection-in-angular-1-and-angular-2, http://www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0 – Günter Zöchbauer Feb 02 '16 at 06:14
  • I have read the links that you gave...I have implemented a plunker demo http://plnkr.co/edit/IK95wH5amHBBnQ6K09b0?p=preview Is this the way i need to pass the object using DI? – abhilash reddy Feb 02 '16 at 06:54
  • `directives` is for components and directives used in the view (HTML). You don't need to add them to `providers:`. `providers` is for services used in the controllers (the component or directive classes). You don't need to add them to `directives:`. Services are just classes. You mixed service and component in your Plunker. Services are just code. I updated your plunker http://plnkr.co/edit/FhYkCUmmIxp5SNL6TzM6?p=preview. This might not exactly be what you want but I hope it helps you to gain more insight and find the right follow-up questions. – Günter Zöchbauer Feb 02 '16 at 07:19
  • I had similar problem and solved it that way, however it reminds me global scope. The scope is defined by a component that has "providers" entry but still managing that in child components could get messy. Could you elaborate on this subject a little bit @günter-zöchbauer – kit Feb 02 '16 at 08:02
  • 1
    I had the same thought about global state repeatedly. For one you can, as you mentioned, limit the scope to a sub-tree by where you add the provider. You also limit the scope by the type of the service class. I'm not fully satisfied but it's not too bad either. It's a great advantage for testability. In overall I think it's a good compromise and I also don't know how to do it better ;-) – Günter Zöchbauer Feb 02 '16 at 08:10
0

An advantage of using input properties on the children (rather than a shared service) is that Angular change detection will automatically propagate changes to the children. This is especially useful if you are using immutable objects and you want to change your entire model (to a new instance/reference).

With a service, you can change the model, but not the model reference.

With input properties, you can do either: change the model and/or change the model reference.

See the following Savkin blog post for more about modeling using immutable data: http://victorsavkin.com/post/133936129316/angular-immutability-and-encapsulation

Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492