How to Pass data from child to parent component Angular

Question

I have a component named search detail which has another component inside it named calendar    SearchDetail component html    lt li class  date  gt      lt div class  btn-group dropdown   class open   DatedropdownOpened  gt      lt button type  button   click   DatedropdownOpened    DatedropdownOpened    class  btn btn-default dropdown-toggle  data-toggle  dropdown  aria-haspopup  true   attr aria-expanded   dropdownOpened    true    false   gt        Date  lt span class  caret  gt  lt  span gt     lt  button gt     lt ul class  dropdown-menu default-dropdown  gt        lt calendar   gt  lt  calendar gt        lt button  gt  Cancel  lt  button gt        lt button  click   setDate category   gt  Ok  lt  button gt      lt  ul gt                                lt  div gt   lt  li gt    SearchDetail component ts  import  rxjs add observable fromEvent    Component       selector   searchDetail       templateUrl     search detail component html       moduleId  module id       Calendar component ts  import   Component  Input  from   angular core     Component       moduleId module id      selector   calendar       templateUrl     calendar component html          export class CalendarComponent        public fromDate Date   new Date              private toDate Date   new Date          private events Array lt any gt         private tomorrow Date        private afterTomorrow Date        private formats Array lt string gt      DD-MM-YYYY    YYYY MM DD    DD MM YYYY    shortDate          private format   this formats 0         private dateOptions any             formatYear   YY           startingDay  1                private opened boolean   false         public getDate   number           return this fromDate getDate       new Date   getTime                    I want to access the startdate and enddate on click of the ok button in the search detail page  how can i do

User · Answer

Hello you can make use of input and output. Input let you to pass variable form parent to child. Output the same but from child to parent.

The easiest way is to pass "startdate" and "endDate" as input

<calendar [startDateInCalendar]="startDateInSearch" [endDateInCalendar]="endDateInSearch" ></calendar>

In this way you have your startdate and enddate directly in search page. Let me know if it works, or think another way. Thanks

User · Answer

In order to send data from child component create property decorated with output   in child component and in the parent listen to the created event  Emit this event with new values in the payload when ever it needed    Output   public eventName EventEmitter   new EventEmitter      to emit this event   this eventName emit payloadDataObject

User · Answer

Register the EventEmitter in your child component as the  Output   Output   onDatePicked   new EventEmitter lt any gt      Emit value on click  public pickDate date  any   void       this onDatePicked emit date      Listen for the events in your parent component s template   lt div gt       lt calendar  onDatePicked   quot doSomething  event  quot  gt  lt  calendar gt   lt  div gt   and in the parent component  public doSomething date  any  void       console log  Picked date     date      It s also well explained in the official docs  Component interaction

[javascript] How to Pass data from child to parent component Angular

Examples related to javascript

Examples related to angular

Examples related to typescript

Examples related to components