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>
Related
I have 2 pages, login and home, when the user successfully logins, it will be directed to the home page and I set this as the root page. I've confirmed this by using navCtrl.canGoBackFunction and it is false. I tried adding a Menu Toggle but when I pressed the toggle button the menu does not show up
This is my home.html
<ion-header>
<ion-navbar color="primary">
<button menuToogle ion-button icon-only class="menu-button-left">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title class="alogo"><img alt="logo" height="35" src="../../assets/imgs/logo.png" ></ion-title>
<button ion-button class="menu-button-right" (click)="logout()">
<p>Logout</p>
</button>
</ion-navbar>
</ion-header>
<ion-content padding-left padding-right>
</ion-content>
my home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { AuthService } from '../../app/services/auth.service'
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(
public navCtrl: NavController,
private authService: AuthService
) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad HomePage');
console.log(localStorage.getItem('token'));
}
logout(){
console.log('logout button clicked');
this.authService.logOut();
this.navCtrl.setRoot(LoginPage);
this.navCtrl.popToRoot();
}
}
my app.html
<ion-menu [content]="mycontent">
<ion-content>
<ion-list>
<p>List/p>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #mycontent [root]="rootPage" swipeBackEnabled="false"></ion-nav>
I've re-read multiple times the manual and I didn't see any issues with the way I did, the manual says it I put it in navbar the page should be root. I also tried using a toolbar but again clicking the menu toggle button does not do anything. Any idea ?
Persistent menus display the MenuToggle button in the Navbar on all pages in the navigation stack. To make a menu persistent set persistent to true on the element. Note that this will only affect the MenuToggle button in the Navbar attached to the Menu with persistent set to true, any other MenuToggle buttons will not be affected. In your code you have to change like below code.
my app.html
<ion-menu [content]="mycontent" persistent="true">
<ion-content>
<ion-list>
<p>List/p>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #mycontent [root]="rootPage" swipeBackEnabled="false"></ion-nav>
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.
I have a very simple page with a couple of controls.
My issue is that the page does not pickup changes to the model when the icon in upper right corner is clicked. This toggles the showFilterPane variable, which again should show or hide a div based on *ngIf="showFilterPane".
I have another page just like this one working, and I can not figure out why this isn't.
Any tips?
(I've tried using the ChangeDetectorRef.detectChanges(); which works, but then the rangeslider will not work. The draggable point doesn't update, or does not move to where you tap.)
The page:
<ion-header>
<ion-navbar>
<ion-title>MY AO</ion-title>
<ion-buttons end>
<button ion-button (click)="toggleFilterPane()" icon-only>
<ion-icon name="options"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<div class="container">
<div class="left">
<div *ngIf="isSearching" class="spinner-container">
<ion-spinner></ion-spinner>
</div>
<!-- put content here -->
</div>
<div class="right" *ngIf="showFilterPane">
<ion-list inset>
<ion-list-header>BANA</ion-list-header>
<ion-item>
<ion-select multiple="true" [(ngModel)]="woTrackFilter">
<ion-option>1</ion-option>
<ion-option>2</ion-option>
<ion-option>3</ion-option>
<ion-option>4</ion-option>
<ion-option>5</ion-option>
</ion-select>
</ion-item>
</ion-list>
<ion-list inset>
<ion-list-header>TEKNIKSLAG</ion-list-header>
<ion-item>
<ion-select multiple="true" [(ngModel)]="woDisciplineFilter">
<ion-option>Signal</ion-option>
<ion-option>Bana</ion-option>
<ion-option>EL</ion-option>
<ion-option>Tele</ion-option>
</ion-select>
</ion-item>
</ion-list>
<ion-list inset>
<ion-list-header>DAGAR</ion-list-header>
<ion-item>
<ion-range min="10" max="80" step="4" [(ngModel)]="woDaysFilter">
<ion-label range-left>10</ion-label>
<ion-label range-right>80</ion-label>>
</ion-range>
</ion-item>
</ion-list>
<button ion-button (click)="doSearch()">Search</button>
</div>
</div>
</ion-content>
The component:
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { WorkOrderDashboardPage } from "../work-order-dashboard/work-order-dashboard";
#Component({
selector: 'page-work-order-list',
templateUrl: 'work-order-list.html'
})
export class WorkOrderListPage {
private isSearching: boolean = false;
private showFilterPane: boolean=false;
private woTrackFilter: string[];
private woDisciplineFilter: string[];
private woDaysFilter: number;
constructor(public navCtrl: NavController, public navParams: NavParams) {
// Initialize storage providers here
}
ionViewDidLoad() {
console.log('ionViewDidLoad WorkOrderListPage');
}
toggleFilterPane(): void {
this.showFilterPane = !this.showFilterPane;
}
viewWorkOrder(event, workOrder): void {
this.navCtrl.push(WorkOrderDashboardPage, { workOrder: workOrder });
}
doSearch(): void {
console.log(this.woTrackFilter);
console.log(this.woDisciplineFilter);
console.log(this.woDaysFilter);
}
}
UPDATE: Found workaround
I tried creating a separate app, where the exact same code is working. That lead me to think something wasn't right on the LoginPage, the page that called setRoot() to the above page.
The login code looked like this:
WLAuthorizationManager.login("UserLogin", data).then(() => {
// Success
console.log("Logged in");
this.navCtrl.setRoot(WorkOrderListPage);
},
(err) => {
// failed
console.error(err);
this.showError("Username or password is incorrect");
})
I then figured it might be some Zone issue, and wrapped the setRoot call in zone.run() like this:
WLAuthorizationManager.login("UserLogin", data).then(() => {
// Success
console.log("Logged in");
this.zone.run(() =>
this.navCtrl.setRoot(WorkOrderListPage)
);
},
(err) => {
// failed
console.error(err);
this.showError("Username or password is incorrect");
})
After that the view started to respond as expected. I feel this is a bit of a hack. Can someone shed some light as to what is happening here?
Seems like you are basically using ngZone to make sure Angular knows you changed things so it will reload that part of the DOM to reflect the changes. I don't feel like it's a hack, because you are just making sure that it works as intended.
Angular 2 has some optimization features that help make your app run smoother and one of those is avoiding DOM updates whenever and wherever possible. By using zones (or ngZones) you are basically telling Angular "pay attention to this part, it changes and I need that change to be reflected in the DOM".
I've run into that sort of problem before myself and using zones is usually your best bet. Got into situations where a part of the interface would be stuck unless you touched a button or somesuch.
Another workaround (at least for range sliders) is using the AppllicationRef tick() method, which forces a DOM update. More info about it here.
Having had some experience with Angular 1.x (but not Ionic 1.x), I am now trying to develop a small mobile app using Ionic 2, which is based on Angular 2.
I am familiar with URL-based routing principles such as those used in ui-router. The concept in Ionic 2 is different and is based on pushing/popping pages on top of a root page.
So far I have managed to create 2 pages (Search and Person) with a nav bar on top, and to navigate from one to the other, and back. The navbar has a button to return to the root (Search) page (because later it will be possible to navigate from a person to other pages, further away from the root page).
However I could not figure out how to extract the navbar and navbar controller in a separate file. So the markup and the button handler (goToSearch) are repeated in every page.
How can I extract the navbar template and logic so as not to repeat it ?
Bonus question (and strongly related) : Can someone explain the difference between the ion-nav in app.html and the ion-navbar in the pages ?
app.ts :
import 'es6-shim';
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {Search} from './pages/search/search'
#App({
templateUrl: 'build/pages/app.html',
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
rootPage: any = Search;
constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
});
}
}
app.html :
<ion-nav [root]="rootPage">
<ion-buttons end>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-nav>
search.ts :
import {Page} from 'ionic-angular';
import {Nav} from 'ionic-angular';
import {Person} from '../person/person'
#Page({
templateUrl: 'build/pages/search/search.html',
})
export class Search {
nav:Nav;
constructor(nav:Nav) {
this.nav = nav;
}
goToPerson() {
this.nav.push(Person);
}
}
search.html:
<ion-navbar *navbar>
<ion-title>Search</ion-title>
<ion-buttons end>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-content padding class="page1">
<h2>Welcome to SEARCH</h2>
<button (click)="goToPerson()">Go to person</button>
</ion-content>
person.ts :
import {Page} from 'ionic-angular';
import {Nav} from 'ionic-angular';
import {Search} from '../search/search'
#Page({
templateUrl: 'build/pages/person/person.html',
})
export class Person {
nav:Nav;
constructor(nav:Nav) {
this.nav = nav;
}
goToSearch() {
this.nav.push(Search);
}
}
person.html :
<ion-navbar *navbar>
<ion-title>Person</ion-title>
<ion-buttons end>
<button (click)="goToSearch()">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-content padding class="page1">
<h2>Welcome to PERSON</h2>
<button (click)="goToSearch()">Go to search</button>
</ion-content>
you could create a component to hold your header config, components are reusable and can be very dynamic, just dont forget to import it on your module
default-header.html
<ion-navbar *navbar>
<ion-title>{{pageTitle}}</ion-title>
<ion-buttons end>
<button (click)="goToSearch()">
<ion-icon name="{{icon}}"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
default-header.ts
import { Component, Input, Inject, ViewChild } from "#angular/core";
import { Content } from "ionic-angular";
import { NavController } from "ionic-angular/navigation/nav-controller";
import {Person} from '../person/person'
#Component({
selector: "default-header",
templateUrl: "default-header.html"
})
export class DefaultHeaderComponent {
#Input() pageTitle: any;
#Input() icon= true;
#ViewChild(Content) content: Content;
constructor(
public navCtrl: NavController,
) {
console.log("Hello DefaultHeaderComponent Component");
}
ionViewDidLoad() {
const self = this;
}
gotNotificationsPage() {
this.global.setRoot("NotificationsPage");
}
}
and call it in the place of your navbar like this in any page
<default-header [title]="'Person'" [icon]="'search'"></default-header>