Event Emitters Component Interactions in Angular Ionic

This article is more about understanding the Event Emitters in Angular and Ionic. Data flow is the most important when you build an application to communicate with components. Event Emitters will help you to even bind using @Input @Output decorators. Here is a simple example to display and update the user profile using Angular Event Emitters. For this demo I choose Ionic framework for better experience. Take a quick look at the live demo.

components.module.ts
Here you have to import the components and include these in declarations and exports. Using this module you can easily export these child components to other components or pages. Basic Angular Cli project imports by default.

user-profile.component.ts
Use the @Input() Event Emitter, you can receive the userProfile data.

import{Component,OnInit,Input}from'@angular/core';

@Component({

selector:'app-user-profile',

templateUrl:'./user-profile.component.html',

styleUrls:['./user-profile.component.scss'],

})

exportclassUserProfileComponentimplementsOnInit {

@Input() userProfile:any;

constructor() { }

ngOnInit() {}

}

user-profile.component.html
Updated the design with Ionic UI components and displaying user information using the userProfile @Input event emitter. In this design included a button for showing and hiding the edit profile component.

<ion-card>

<ion-card-header>

<ion-card-subtitle>Profile</ion-card-subtitle>

<ion-card-title[innerHTML]="userProfile.name"></ion-card-title>

</ion-card-header>

<ion-card-content>

<p[innerHTML]="userProfile.about"></p>

<ion-buttonsize="small">Edit</ion-button>

</ion-card-content>

</ion-card>

You will find the updated design with user information.

Working with Edit Profile Buttontab1.page.ts
Introducing the editProfileStatus variable with false value. Using editProfileToggle method, toggling the status value to show and hide the components.

import{Component,OnInit}from'@angular/core';

@Component({

selector:'app-tab1',

templateUrl:'tab1.page.html',

styleUrls:['tab1.page.scss']

})

exportclassTab1PageimplementsOnInit {

userProfileData = {

name:'',

about:''

};

editProfileStatus =false;

constructor() {}

ngOnInit() {

this.getUserProfileData();

console.log(this.userProfileData);

}

getUserProfileData() {

/* Get this data from the API */

this.userProfileData.name='Srinivas Tamada';

this.userProfileData.about='Make people fall in love with your ideas.';

}

editProfileToggle() {

this.editProfileStatus=!this.editProfileStatus;

}

}

tab1.page.html
Add the *ngIf condition and use ng-template for else condition. Added the editProfileToggle method to app-user-profile component for edit button action.

edit-profile.component.html
Create an edit profile form using Ionic Form components. Here #profileName is a reference for the user name input, use the for focusing the user profile name input. newUserProfileData is the empty object to get the user edit information.