Looking at real-world apps, a parent-child interaction is prevalent.
In angular, there is a built in declarative meta decoration tag – @Input and @Output for such purpose.

You will learn literally the in A,B,C easy-way to use both @Input and @Ouput with real-world case scenario with concept and practical aspect .


Concept

Component interaction action can be from anything to sending/receiving and content can be data/events/functions.
Example, in a parent-level interaction , parent component can send a message to its children component, in return its child component can process that message and return back and event to be processed by the parent.

Based on the diagram below, when parent send info its children, the @Input tag is used. In the reverse , children communicate the event back to its parent via @Output tag.


 

Practical
Let’s see a demo practically on form.
Each time the input textbox field is empty, the error message appears.
The error message will disappear when user press the dismiss ok button or key in something in textbox.

From the example, we create two component – textbox as parent and a tooltip as child. Tooltip depends on its parent Textbox for the message.

Overview is illustrated below.

  


Configuring the @Input

A) In parent component textbox.component, we create a property name generalTooltipMessage


@Component({...})
export class TextboxComponent {
  generalTooltipMessage = 'User name cannot be empty' 
}

B) In html of textbox.component, we create binding to its parent’s property name to match assignment into its child’s property belonging to tooltip.


  <tooltip  [tooltipMessage]=" generalTooltipMessage"  >
  </tooltip>

<!-- child property name is tooltipMessage -->
<!-- parent property name is generalTooltipMessage-->

C) In child component tooltip.component, we use @Input to denote this property will receive from a property value or expression value.



@Component({...})
export class TooltipComponent {
  @Input() tooltipMessage: string;
}

That’s it! Simple right!


Configuring the @Output

Now, how about sending back a some event from the children/Tooltip to parent/Textbox?

A) First, we name our response property name dismiss and instantiate its type EventEmitter. We have chosen type any for example, please choose specific data type you feel appropriate in your app for the message format.


@Component({...})
export class TooltipComponent{ 
     //import EventEmitter from @angular/core...
     @Output('dismiss') 
     dismiss: EventEmitter = new EventEmitter();
}

B) To use it, we just access the item and emit any message or payload data inside.


@Component({...})
export class TooltipComponent{
  closeMessage() {
    this.dismiss.emit({ "isDismiss": true, "messageFromChild": "Already dismiss at child component" });
  }
}

In our app, we will invoke this method when we click on the ok dismiss button .

C) In the parent Textbox Component, we find the declaration of child . Then, to attach and handle its callback , you just need to specify the output property name dismiss and its callback function name handleMessageFromChild.


 <tooltip (dismiss)="handleMessageFromChild($event)"  >
</tooltip >
 
@Component({...})
export class TextboxComponent{
  handleMessageFromChild(_event) {
    console.log('_event', _event);
 // will display - { "isDismiss": true, "messageFromChild": "Already dismiss at child component" }
 }
}

That’s it! Now you can easily code the interaction!

Leave a Reply

Your email address will not be published. Required fields are marked *