ionic input
<!-- Default Input -->
<ion-input></ion-input>
<!-- Input with value -->
<ion-input value="custom"></ion-input>
<!-- Input with placeholder -->
<ion-input placeholder="Enter Input"></ion-input>
<!-- Input with clear button when there is a value -->
<ion-input clearInput value="clear me"></ion-input>
<!-- Number type input -->
<ion-input type="number" value="333"></ion-input>
<!-- Disabled input -->
<ion-input value="Disabled" disabled></ion-input>
<!-- Readonly input -->
<ion-input value="Readonly" readonly></ion-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>
4.13
8
// 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'
}
}
Thank you!
8
0
4
10
<!-- 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>
Thank you!
10
0
4.33
3
// in component.ts
this.myForm = formBuilder.group({
firstName: ['value'],
lastName: ['value', *validation function goes here*],
age: ['value', *validation function goes here*, *asynchronous validation function goes here*]
});
...
// in component.html
<form [formGroup]="myForm">
<ion-input formControlName="firstName" type="text"></ion-input>
<ion-input formControlName="lastName" type="text"></ion-input>
<ion-input formControlName="age" type="number"></ion-input>
</form>
Thank you!
3
0
Are there any code examples left?
New code examples in category Html