How to use @output in ionic 3

Question

this is parent page

<div>
    <component></component>
<div>

this will redirect to this component where I have created a form now I want to get that data which I fill in the form here in my parent page at child page

<h5> Type of house </h5>
        <ion-item>
            <ion-label stacked> </ion-label>
            <ion-select [(ngModel)]="Type" placeholder="type of house">
                <ion-option value="self"> a </ion-option>
                <ion-option value="got" selected> b </ion-option>
            </ion-select>
        </ion-item>

there's a simple form

I know how to pass data from parent to child but I don't know how to pass data from child to parent using @output

Answer 1

In child.ts

import {Output, EventEmitter} from '@angular/core';
export class ChildComponent {
  ...
  @Output() typeChanged = new EventEmitter<string>();
  type = "got";

  emit() {
    this.typeChanged.emit(this.type);
  }
}

In parent.html

<div>
    <component (typeChanged)="onTypeEmitted($event)"></component>
<div>

In parent.ts

export class ParentComponent {
  ...
  onTypeEmitted(type: string) {
    // do something with 'type'
  }
}

Actually, you can get it from angular.io/guide/component-interaction#Parent listens for child event.