How to pass object from one component to another in Angular 2

Question

I have Angular components and first component uses the second one 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 component

User · Accepted Answer

Component 2  the directive component can define a input property   input annotation in Typescript   And Component 1 can pass that property to the directive component from template   See this SO answer How to do inter communication between a master and detail component in Angular2   and how input is being passed to child components  In your case it is directive

User · Answer

From component   x000D   x000D  import   Component  OnInit  ViewChild  from   angular core   x000D      import   HttpClient   from   angular common http   x000D      import   dataService   from  src app service data service   x000D       Component    x000D          selector   app-sideWidget   x000D          templateUrl     sideWidget html   x000D          styleUrls      linked-widget component css   x000D          x000D      export class sideWidget  x000D      TableColumnNames  object    x000D      SelectedtableName  string    patient   x000D      constructor  private LWTableColumnNames  dataService      x000D          x000D        x000D       x000D      ngOnInit     x000D          this http post   getColumns   this SelectedtableName   x000D               subscribe  x000D                data  object       gt    x000D                  this TableColumnNames   data  x000D       this LWTableColumnNames refLWTableColumnNames   this TableColumnNames    this line of code will pass the value through data service x000D                   x000D       x000D            x000D        x000D   x000D   x000D    DataService   x000D   x000D  import   Injectable   from   angular core   x000D  import   BehaviorSubject  Observable   from  rxjs   x000D   x000D   Injectable   x000D  export class dataService   x000D      refLWTableColumnNames  object   creating an object for the data x000D    x000D   x000D   x000D    To Component   x000D   x000D  import   Component  OnInit   from   angular core   x000D  import   dataService   from  src app service data service   x000D   x000D   Component    x000D      selector   app-linked-widget   x000D      templateUrl     linked-widget component html   x000D      styleUrls      linked-widget component css   x000D      x000D  export class LinkedWidgetComponent implements OnInit   x000D   x000D      constructor private LWTableColumnNames  dataService      x000D   x000D      ngOnInit     x000D      console log this LWTableColumnNames refLWTableColumnNames   x000D        x000D      createTable    x000D          console log this LWTableColumnNames refLWTableColumnNames     calling the object from another component x000D        x000D   x000D    x000D   x000D   x000D

User · Answer

For one-way data binding from parent to child  use the  Input decorator  as recommended by the style guide  to specify an input property on the child component   Input   model  any       instead of any  specify your type   and use template property binding in the parent template   lt child  model   parentModel  gt  lt  child gt    Since you are passing an object  a JavaScript reference type  any changes you make to object properties in the parent or the child component will be reflected in the other component  since both components have a reference to the same object   I show this in the Plunker   If you reassign the object in the parent component  this model   someNewModel    Angular will propagate the new object reference to the child component  automatically  as part of change detection    The only thing you shouldn t do is reassign the object in the child component   If you do this  the parent will still reference the original object    If you do need two-way data binding  see https   stackoverflow com a 34616530 215945       Component     selector   child     template    lt h3 gt child lt  h3 gt        lt div gt   model prop1   lt  div gt       lt button  click   updateModel    gt update model lt  button gt      class Child      Input   model  any       instead of any  specify your type   updateModel         this model prop1      child           Component     selector   my-app     directives   Child     template         lt h3 gt Parent lt  h3 gt       lt div gt   parentModel prop1   lt  div gt       lt button  click   updateModel    gt update model lt  button gt       lt child  model   parentModel  gt  lt  child gt      export class AppComponent     parentModel     prop1   1st prop   prop2   2nd prop       constructor        updateModel     this parentModel prop1      parent         Plunker - Angular RC 2

User · Answer

Use the output annotation   Directive     selector   interval-dir      class IntervalDir      Output   everySecond   new EventEmitter       Output  everyFiveSeconds   five5Secs   new EventEmitter      constructor         setInterval      gt  this everySecond emit  event    1000       setInterval      gt  this five5Secs emit  event    5000          Component     selector   app     template         lt interval-dir  everySecond   everySecond     everyFiveSeconds   everyFiveSeconds    gt       lt  interval-dir gt         directives   IntervalDir     class App     everySecond     console log  second        everyFiveSeconds     console log  five seconds        bootstrap App

User · Answer

you could also store your data in an service with an setter and get it over a getter  import   Injectable   from   angular core     Injectable   export class StorageService        public scope  Array lt any gt    boolean   false       constructor                public getScope    Array lt any gt    boolean           return this scope             public setScope scope  any   void           this scope   scope

[angular] How to pass object from one component to another in Angular 2?

Examples related to angular

Examples related to angular2-directives