ionic input example

Example 1: ionic input

<!-- Inputs with labels -->
<ion-item>
  <ion-label>Default Label</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label position="floating">Floating Label</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label position="fixed">Fixed Label</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label position="stacked">Stacked Label</ion-label>
  <ion-input></ion-input>
</ion-item>

Example 2: input output ionic

// 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);
  }
}
// parent.html

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

// In parent.ts

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