Angular pass callback function to child component as Input similar to AngularJS way

Question

AngularJS has the  amp  parameters where you could pass a callback to a directive  e g AngularJS way of callbacks  Is it possible to pass a callback as an  Input for an Angular Component  something like below   If not what would be the closest thing to what AngularJS does    Component       selector   suggestion-menu       providers   SuggestService       template         lt div  mousedown   suggestionWasClicked suggestion   gt       lt  div gt        changeDetection  ChangeDetectionStrategy Default    export class SuggestionMenuComponent        Input   callback  Function       suggestionWasClicked clickedEntry  SomeModel   void           this callback clickedEntry  this query              lt suggestion-menu callback  insertSuggestion  gt   lt  suggestion-menu gt

User · Answer

Use Observable pattern  You can put Observable value  not Subject  into Input parameter and manage it from parent component  You do not need callback function   See example  https   stackoverflow com a 49662611 4604351

User · Answer

An alternative to the answer SnareChops gave   You can use  bind this  in your template to have the same effect  It may not be as clean but it saves a couple of lines  I m currently on angular 2 4 0   Component           template    lt child  myCallback   theCallback bind this   gt  lt  child gt      directives   ChildComponent     export class ParentComponent      public theCallback                    Component        export class ChildComponent      This will be bound to the ParentComponent theCallback    Input     public myCallback  Function

User · Answer

The current answer can be simplified to      Component           template    lt child  myCallback   theCallback  gt  lt  child gt      directives   ChildComponent     export class ParentComponent    public theCallback                    Component        export class ChildComponent      This will be bound to the ParentComponent theCallback    Input     public myCallback  Function

User · Answer

As an example  I am using a login modal window  where the modal window is the parent  the login form is the child and the login button calls back to the modal parent s close function     The parent modal contains the function to close the modal   This parent passes the close function to the login child component   import   Component  from   angular core   import   LoginFormComponent   from    login-form component    Component     selector   my-modal     template    lt modal  modal gt         lt login-form  onClose   onClose  event    gt  lt  login-form gt       lt  modal gt      export class ParentModalComponent     modal            onClose         this modal close            After the child login component submits the login form  it closes the parent modal using the parent s callback function  import   Component  EventEmitter  Output   from   angular core     Component     selector   login-form     template    lt form  ngSubmit   onSubmit     loginForm  ngForm  gt         lt button type  submit  gt Submit lt  button gt       lt  form gt      export class ChildLoginComponent      Output   onClose   new EventEmitter      submitted   false     onSubmit         this onClose emit        this submitted   true

User · Answer

An alternative to the answer Max Fahl gave   You can define callback function as an arrow function in the parent component so that you won t need to bind that    x000D   x000D   Component   x000D        x000D       unlike this  template    lt child  myCallback   theCallback bind this   gt  lt  child gt    x000D    template    lt child  myCallback   theCallback  gt  lt  child gt    x000D    directives   ChildComponent  x000D     x000D  export class ParentComponent   x000D   x000D        unlike this  public theCallback    x000D     public theCallback        gt    x000D          x000D      x000D    x000D   x000D   Component        x000D  export class ChildComponent  x000D      This will be bound to the ParentComponent theCallback x000D     Input   x000D    public myCallback  Function   x000D        x000D    x000D   x000D   x000D

User · Answer

I think that is a bad solution  If you want to pass a Function into component with  Input     Output   decorator is what you are looking for   export class SuggestionMenuComponent        Output   onSuggest  EventEmitter lt any gt    new EventEmitter         suggestionWasClicked clickedEntry  SomeModel   void           this onSuggest emit  clickedEntry  this query              lt suggestion-menu  onSuggest   insertSuggestion  event 0   event 1    gt   lt  suggestion-menu gt

User · Answer

Another alternative   The OP asked a way to use a callback  In this case he was referring specifically to a function that process an event  in his example  a click event   which shall be treated as the accepted answer from  serginho suggests  with  Output and EventEmitter   However  there is a difference between a callback and an event  With a callback your child component can retrieve some feedback or information from the parent  but an event only can inform that something happened without expect any feedback   There are use cases where a feedback is necessary  ex  get a color  or a list of elements that the component needs to handle  You can use bound functions as some answers have suggested  or you can use interfaces  that s always my preference    Example  Let s suppose you have a generic component that operates over a list of elements  id  name  that you want to use with all your database tables that have these fields  This component should    retrieve a range of elements  page  and show them in a list allow remove an element inform that an element was clicked  so the parent can take some action s    allow retrieve the next page of elements    Child Component  Using normal binding we would need 1  Input   and 3  Output   parameters  but without any feedback from the parent   Ex   lt list-ctrl  items   list   itemClicked   click  event    itemRemoved   removeItem  event    loadNextPage   load  event       gt   but creating an interface we will need only one  Input     import  Component  Input  OnInit  from   angular core    export interface IdName    id  number    name  string     export interface IListComponentCallback lt T extends IdName gt        getList page  number  limit  number   Promise lt  T    gt       removeItem item  T   Promise lt boolean gt       click item  T   void      Component       selector   list-ctrl       template           lt button class  item   click   loadMore    gt Load page   page 1   lt  button gt         lt div class  item   ngFor  let item of list  gt             lt button  click   onDel item   gt DEL lt  button gt             lt div  click   onClick item   gt              Id    item id    Name     item name               lt  div gt         lt  div gt             styles            item  margin  -1px  25rem 0  border  1px solid  888  padding   5rem  width  100   cursor pointer           item  gt  button  float  right          button item margin  25rem             export class ListComponent implements OnInit        Input   callback  IListComponentCallback lt IdName gt       lt -- CALLBACK     list  IdName        page   -1       limit   10       async ngOnInit           this loadMore              onClick item  IdName          this callback click item                async onDel item  IdName            if await this callback removeItem item               const i   this list findIndex i  gt i id    item id             this list splice i  1                       async loadMore          this page          this list   await this callback getList this page  this limit              Parent Component  Now we can use the list component in the parent   import   Component   from   angular core   import   SuggestionService   from    suggestion service   import   IdName  IListComponentCallback   from    list component    type Suggestion   IdName    Component     selector   my-app     template         lt list-ctrl class  left   callback   this  gt  lt  list-ctrl gt       lt div class  right   ngIf  msg  gt    msg    lt br  gt  lt pre gt   item json   lt  pre gt  lt  div gt         styles         left  width  50          left  right  color  blue  display  inline-block  vertical-align  top       right max-width 50  overflow-x scroll padding-left 1rem          export class ParentComponent implements IListComponentCallback lt Suggestion gt      msg  string    item  Suggestion     constructor private suggApi  SuggestionService        getList page  number  limit  number   Promise lt Suggestion   gt        return this suggApi getSuggestions page  limit         removeItem item  Suggestion   Promise lt boolean gt        return this suggApi removeSuggestion item id         then      gt            this showMessage  removed   item           return true                  catch      gt  false         click item  Suggestion   void       this showMessage  clicked   item         private showMessage msg  string  item  Suggestion        this item   item      this msg    last     msg          Note that the  lt list-ctrl gt  receives this  parent component  as the callback object  One additional advantage is that it s not required to send the parent instance  it can be a service or any object that implements the interface if your use case allows it   The complete example is on this stackblitz

User · Answer

UPDATE  This answer was submitted when Angular 2 was still in alpha and many of the features were unavailable   undocumented  While the below will still work  this method is now entirely outdated  I strongly recommend the accepted answer over the below   Original Answer  Yes in fact it is  however you will want to make sure that it is scoped correctly  For this I ve used a property to ensure that this means what I want it to    Component           template    lt child  myCallback   theBoundCallback  gt  lt  child gt      directives   ChildComponent     export class ParentComponent    public theBoundCallback  Function     public ngOnInit        this theBoundCallback   this theCallback bind this          public theCallback                    Component        export class ChildComponent      This will be bound to the ParentComponent theCallback    Input     public myCallback  Function

User · Answer

Passing method with argument  using  bind inside template   Component           template    lt child  action   foo bind this   someArgument    gt  lt  child gt             export class ParentComponent     public foo someParameter  string                   Component        export class ChildComponent      Input     public action  Function

User · Answer

In some cases  you might need business logic to be performed by a parent component  In the example below we have a child component that renders table row depending on the logic provided by the parent component    Component           template    lt table-component  getRowColor   getColor  gt  lt  table-component gt      directives   TableComponent     export class ParentComponent        Pay attention on the way this function is declared  Using fat arrow    gt   declaration      we can  fixate  the context of  getColor  function     so that it is bound to ParentComponent as if  bind this  was used   getColor    row  Row    gt        return this fancyColorService getUserFavoriteColor row           Component        export class TableComponent       This will be bound to the ParentComponent getColor        I found this way of declaration a bit safer and convenient than just raw Function declaration    Input  getRowColor   getRowColor   row  Row    gt  Color     renderRow                    Notice that  getRowColor  function holds parent s context because of a fat arrow function used in the parent     const color   this getRowColor row       renderRow row  color           So  I wanted to demonstrate 2 things here    Fat arrow      functions instead of  bind this  to hold the right context  Typesafe declaration of a callback function in the child component

[angularjs] Angular pass callback function to child component as @Input similar to AngularJS way

Examples related to angularjs

Examples related to angular

Examples related to typescript