ionic input

1<!-- Default Input -->
2<ion-input></ion-input>
3
4<!-- Input with value -->
5<ion-input value="custom"></ion-input>
6
7<!-- Input with placeholder -->
8<ion-input placeholder="Enter Input"></ion-input>
9
10<!-- Input with clear button when there is a value -->
11<ion-input clearInput value="clear me"></ion-input>
12
13<!-- Number type input -->
14<ion-input type="number" value="333"></ion-input>
15
16<!-- Disabled input -->
17<ion-input value="Disabled" disabled></ion-input>
18
19<!-- Readonly input -->
20<ion-input value="Readonly" readonly></ion-input>
21
22<!-- Inputs with labels -->
23<ion-item>
24  <ion-label>Default Label</ion-label>
25  <ion-input></ion-input>
26</ion-item>
27
28<ion-item>
29  <ion-label position="floating">Floating Label</ion-label>
30  <ion-input></ion-input>
31</ion-item>
32
33<ion-item>
34  <ion-label position="fixed">Fixed Label</ion-label>
35  <ion-input></ion-input>
36</ion-item>
37
38<ion-item>
39  <ion-label position="stacked">Stacked Label</ion-label>
40  <ion-input></ion-input>
41</ion-item>

1// in component.ts
2this.myForm = formBuilder.group({
3    firstName: ['value'],
4    lastName: ['value', *validation function goes here*],
5    age: ['value', *validation function goes here*, *asynchronous validation function goes here*]
6});
7
8...
9
10// in component.html
11<form [formGroup]="myForm">
12    <ion-input formControlName="firstName" type="text"></ion-input>
13    <ion-input formControlName="lastName" type="text"></ion-input>
14    <ion-input formControlName="age" type="number"></ion-input>
15</form>

1<!-- Inputs with labels -->
2<ion-item>
3  <ion-label>Default Label</ion-label>
4  <ion-input></ion-input>
5</ion-item>
6
7<ion-item>
8  <ion-label position="floating">Floating Label</ion-label>
9  <ion-input></ion-input>
10</ion-item>
11
12<ion-item>
13  <ion-label position="fixed">Fixed Label</ion-label>
14  <ion-input></ion-input>
15</ion-item>
16
17<ion-item>
18  <ion-label position="stacked">Stacked Label</ion-label>
19  <ion-input></ion-input>
20</ion-item>

1// In child.ts
2
3import {Output, EventEmitter} from '@angular/core';
4export class ChildComponent {
5  ...
6  @Output() typeChanged = new EventEmitter<string>();
7  type = "got";
8
9  emit() {
10    this.typeChanged.emit(this.type);
11  }
12}
13// parent.html
14
15<div>
16    <component (typeChanged)="onTypeEmitted($event)"></component>
17<div>
18
19// In parent.ts
20
21export class ParentComponent {
22  ...
23  onTypeEmitted(type: string) {
24    // do something with 'type'
25  }
26}