In Ionic 4 how do you do two-way binding. In Ionic 3 I would do the following:
<ion-item color="light"> <ion-input type="string" placeholder="Username" [(ngModel)]="username"></ion-input> </ion-item>
However in Ionic 4 I get the following error:
Can't bind to 'ngModel' since it isn't a known property of 'ion-input'.
1. If 'ion-input' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'ion-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component. ("d>
<ion-item color="light">
<ion-input type="string" placeholder="Username" [ERROR ->][(ngModel)]="username"></ion-input>
</ion-item>
<ion-item color="light">
"): ng:///AppModule/LoginPage.html#12:62
How do I get this working in Ionic 4?
Please keep in mind to add the FormsModule to your module or create a SharedModule to import and export FormsModule
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: '',
component: HomePage
}
])
],
declarations: [HomePage]
})
export class HomePageModule { }
You just need to import FormsModule in app.module.ts.
As i have already gave the answer in detail.
Visit to the link for detail
https://stackoverflow.com/a/55684045/7983887
Add FormsModule in the your Angular module
Related
output sample: output
In the furtherModules function, under the main module Environmental Compliance Management there is two sub modules which is Chemical Management and PPE Management, so when the user click Chemical Management it should go to a new page and when the user click PPE Management it should go to another page.I don't know how to do that. I really need help on this.
home.html code:
<ion-content class="outer-content">
<ion-card>
<ion-card-header>
{{content}}
</ion-card-header>
<ion-card-content>
<ion-segment [(ngModel)]="content" color="dark">
<ion-segment-button value="Environment Compliace Management">
<ion-icon name="flask"></ion-icon>
</ion-segment-button>
<ion-segment-button value="Health & Safety Management">
<ion-icon name="medkit"></ion-icon>
</ion-segment-button>
</ion-segment>
<ion-list style="margin: 0" inset>
<button ion-item *ngFor="let sContent of getContentItems(content)" (click)="furtherModules()">
<ion-icon item-start [name]="sContent.icon" color= "primary"></ion-icon>
{{sContent.name}}
</button>
</ion-list>
</ion-card-content>
</ion-card>
</ion-content>
home.ts code:
import {Component} from '#angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import {ModuleListPage} from '../module-list/module-list';
import { identifierName } from '#angular/compiler';
#Component({
templateUrl: 'home.html'
})
export class HomePage{
content="MODULES";
constructor(public navCtrl: NavController, public navParams: NavParams) {}
items: any = {
'Environmental Compliance Management': [
{
name: 'Chemical Management',
icon: 'nuclear',
},
{
name: 'PPE Management',
icon: 'man'
}
],
'Health & Safety Management': [
{
name: 'Emergency Incident Management',
icon: 'alert'
},
{
name: 'Machinery Management',
icon: 'construct'
},
{
name: 'Risk Management',
icon: 'cog'
}
]
};
getContentItems(type:any){
return this.items[type];
}
furtherModules(){
}
}
First need to identify which page are we directing to, for an example in my case i generate a dummy page which is 'MyAwesomePage' and 'MyAnotherAwesomePage' then in .ts file need to do something like this
{
name: 'Chemical Management',
icon: 'nuclear',
goTo: 'MyAwesomePage'
},
{
name: 'PPE Management',
icon: 'man',
goTo: 'MyAnotherAwesomePage'
}
public furtherModules(sContent:any): void{
// Validate here if sContent.goTo is a valid page
this.navCtrl.push(sContent.goTo, {_sContent: sContent});
}
after that, in .html file need to do something like this
<ion-list style="margin: 0" inset>
<button ion-item *ngFor="let sContent of getContentItems(content)" (click)="furtherModules(sContent)">
<ion-icon item-start [name]="sContent.icon" color= "primary"></ion-icon>
{{sContent.name}}
</button>
</ion-list>
Ok i just understand what do you want to achieve
You must create a page for both Environment Compliace Management and Health & Safety Management using cli below
ionic g page Environment Compliace Management
ionic g page Health & Safety Management
refer to this link for more details,better to read the documentation first.
Add your page to your app.module.ts refer to this tutorial i dont need to explain it
third do something like below
In your html file put some input paramers to your furthermodules function
(click)="furtherModules(content)
In your ts file do something like below
furtherModules(type:any){
if('Environment Compliace Management'){
this.navCtrl.push(*name of your page to environment compliace management*)
}
else{
this.navCtrl.push(*name of your page to Health & Safety Management*)
}
}
I'm new to Ionic and I would like to know how I can pass data that is in between the <p></p> HTML tag to my home.ts file. I have tried doing getElementById but that doesn't seem to work. Also ViewChild but with zero results. I'd like to have some help concerning this question.
From .ts -> html :
.ts-> varString : String = "Hallo world";
html-> {{varString}}
From html -> .ts depends of html tag
Ex. <input type=“text” name=“username” [(ngModel)]=“username”>
username is username : String = ""; and it changes avry time you update the input. Similar to other html tags. You can also get elements by id or class using Element of ionic angular
there is many way to pass data between html and ts, but you must have good understand about MVC design pattern. the MVC is the reason of why google introduced angular.
in angular (engine of ionic), your View(html in your project) knows everything about controller(ts file).
***** home.ts********
public MyName:string="jon";
MyFunc1()
{
alert(this.MyName);
}
MyFunc2()
{
this.MyName="other name";
alert(this.MyName);
}
*****home.html*******
<input type="text" [(ngModel)]="MyName" >
<p>{{MyName}}</p>
<button ion-button (click)="MyFunc1()" >MyFunc1</button>
<button ion-button (click)="MyFunc2()" >MyFunc2</button>
.
.
.
if you change the value of MyName in ts, then it will change automatically in html and also if you change you input value (that it is binded to MyName) it will change the MyName value in model (in ts).
Selecting DOM in ionic isn't a right way to change models value.
Taking the simple example of a Login page,
<ion-item>
<ion-label floating color="primary">Registered Email ID</ion-label>
<ion-input [(ngModel)]="login.email" name="email" type="text" #email="ngModel" spellcheck="false" autocapitalize="off"
required>
</ion-input>
</ion-item>
<ion-item>
<ion-label floating color="primary">Passcode</ion-label>
<ion-input [(ngModel)]="login.passcode" name="password" type="password" #password="ngModel" required>
</ion-input>
</ion-item>
The .ts code for this would be:
login= { username: '', email:'', mobile:'', passcode:'' };
That is literally it!
You can also go about without the login object and can declare variables like
username: any
email: any
and so on; and directly reference them in the html as
[(ngModel)]="username"
Hope it helps!
First try to understand that when you are working on Ionic, you are working on Angular but not Core Javascript.
and here is simple example that may help
home.html
import {Component} from '#angular/core';
import {NavController, AlertController} from 'ionic-angular';
#Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
name: string;
constructor(public navCtrl: NavController, private alertController: AlertController) {
}
showName() {
console.log(this.name);
let alert = this.alertController.create({
title: 'Hello ' + this.name + '!',
buttons: ['OK']
});
alert.present();
}
}
home.ts
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-label>{{ name }}</ion-label>
<ion-input [(ngModel)]="name"></ion-input>
<button (click)="showName()">Click Me</button>
</ion-content>
I'm using Ionic 3.*, tring to create a component that contains just a button.
The component code is:
#Component({
selector: 'profile-button',
templateUrl: 'profile-button.html',
})
export class ProfileButtonComponent {
constructor(
private popoverCtrl: PopoverController
) {}
/**
* Present the Profile popover
* #param ev
* #returns {Promise<any>}
*/
async presentPopover(ev) {
let popover = this.popoverCtrl.create(ProfilePopover);
return popover.present({
ev
});
}
}
and my template is:
<button ion-button icon-only (click)="presentPopover($event)" title="Profile">
<ion-icon name="person"></ion-icon>
</button>
The problem:
The problem is that the icon-only directive is just ignored. The button still have a background color.
If I put the template outside the component, it shows the right style.
Looks like the directives is not available inside a Component. My component is inside a custom module, not on AppModule.
How can I solve this? Found that on Ionic2 i need to import the directives manually, but it don't work on Ionic3.
I've solved the issue, maybe with an workarround:
Changed the component selector to attribute selector: [profile-button]
Wrapped the template in a <ion-buttons end> tag
Called the component as an attribute of <ion-buttons end>
<ion-buttons profile-button end></ion-buttons>
Note: The issue wasn't with icon-only directive. But it's a style issue on Ionic that required the button directly child of the toolbar or ion-buttons to get proper styles.
I found solution on another S.O. thread.
In your *.module.ts add IonicModule into imports section.
#NgModule({
imports: [
CommonModule, // <-- standard Angular module
IonicModule // <-- standard ionic module
], ...
})
In your template try adding your content inside a ion-content
<ion-content>
</ion-content>
you can remove ion-button and add:
class="disable-hover button button-ios button-clear button-clear-ios button-clear-ios-dark"
change dark as you want.
Hi i just started using ionic 2 for my project , how to update ui value in ionic 2? jus simply when we click button some text changed. I tried this but didnt work
home.ts
#Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
public test: any;
constructor(private nav: NavController) {
}
update(){
this.test = "updated text";
}
}
home.html
<ion-content>
<p>{{test}}</p>
<button (click)="update()">update</button>
</ion-content>
Please help, thanks!
On HTML you should use {{test}} as you are modifying test varaible value.
<ion-content>
<p>{{test}}</p>
<button (click)="update()">update</button>
</ion-content>
The possibility is, you might have missed to bootstrap you application main component, you can see similar kind of answer here
change your home.html to this
<ion-content>
<p>[(ngModel)]="test"</p>
<button (click)="update()">update</button>
I want to split a Ionic2 Page into smaller components. In addition I have created Angular2 Components which I insert in the Ionic2 Page. See Code.
If I now use Ionic2 HTML tags in the Angular2 Componentes I get the
No value accessor for '' "
error for my <ion-textarea> tag.
Ionic Page:
#Page({
selector: 'game',
directives: [QuestionComponent, AnswerComponent],
templateUrl: 'build/pages/quiz/quiz.page.html',
styles: [`
`],
)}
...
Ionic Page HTML:
<ion-navbar *navbar>
<ion-title>Game: {{game.id}} -> Round {{round}}</ion-title>
<!-- Question Card -->
<question></question>
<!-- Answer Card -->
<answer></answer>
Angular2 Component:
import {Component} from 'angular2/core'
import {Answer} from "../../../models/answer";
import {AnswerService} from "../../../services/answer.service";
#Component({
selector: 'answer',
providers: [AnswerService],
templateUrl: 'build/pages/quiz/answer/answer.page.html',
styles: [`
`],
})
...
Angular Component HTML:
<ion-card>
<ion-card-content>
<ion-item>
<ion-label floating>Answer</ion-label>
<ion-textarea [(ngModel)]="answerText">></ion-textarea>
<button outline item-right (click)="submitAnswer(answerText)">
Send
<ion-icon name="send"></ion-icon>
</button>
</ion-item>
</ion-card-content>
</ion-card>
Is it possible to use Ionic2 tag components in a Angular2 Component?
Or what is the best way to divided an Ionic 2 page into small components?
*EDIT
Solution
I have found a solution which solves my problem.
Link to solution => Using ion-input inside custom component
To solve it you have to insert the Ionic 2 Directive in the Angular2 Komponetne .
Fix Angular Component:
import {Component} from 'angular2/core'
import {IONIC_DIRECTIVES} from 'ionic-angular';
import {Answer} from "../../../models/answer";
import {AnswerService} from "../../../services/answer.service";
#Component({
selector: 'answer',
directives: [IONIC_DIRECTIVES],
providers: [AnswerService],
templateUrl: 'build/pages/quiz/answer/answer.page.html',
styles: [`
`],
})
I don't know Ionic but this works for Polymer elements and might work here as well - add ngDefaultControl:
<ion-textarea [(ngModel)]="answerText" ngDefaultControl></ion-textarea>
otherwise you'd probably need to implement a custom ControlValueAccessor like mentioned in https://github.com/angular/angular/issues/6639#issuecomment-174703547
See also ngModel: No value accessor for ''
Are you sure that the property answerText exists into the AnswerComponent class ?