In my ionic2 application, I have a textbox , now i am submitting the form without add any value in that textbox , at that time i have give an alert that 'the textbox can not be empty'.
now when alert get close focus should be in same texbox.
import {Component, Input, ViewChild} from '#angular/core';
import {NavController} from 'ionic-angular';
#Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
#ViewChild('input') myInput ;
constructor(private navCtrl: NavController) { }
ionViewLoaded() {
setTimeout(() => {
this.myInput.setFocus();
},150);
}
}
1) import "Input", "ViewChild" and "NavController"
import {Component, Input, ViewChild} from '#angular/core';
import {NavController} from 'ionic-angular';
2) Create a reference to your input in your template :
<ion-input #input>
#ViewChild('input') myInput ;
3) Trigger the focus
ionViewLoaded() {
setTimeout(() => {
this.myInput.setFocus();
},150);
}
4) Show the keyboard
add this line to your config.xml :
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
Related
How do I create 5 star rating in ionic 3, I visited https://github.com/andrucz/ionic2-rating but it is not working. Also read some tutorial but not found anything clean and clear for ionic 3.
Just for clear, I want to get rating value and display rating.
Any help would be appreciated.
Thankyou
Demo: https://stackblitz.com/edit/ionic3-star-rating
Use github.com/melwinVincent/ionic3-star-rating npm package.
Step 1. Add the ionic3-star-rating component in your page (parent component) as follows
<ionic3-star-rating
activeIcon = "ios-star"
defaultIcon = "ios-star-outline"
activeColor = "#488aff"
defaultColor = "#f4f4f4"
readonly="false"
[rating]="3">
</ionic3-star-rating>
Step 2.
You have to import the StarRatingModule in the module.ts of your parent component as follows
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ParentPage } from './parent';
import { StarRatingModule } from 'ionic3-star-rating';
#NgModule({
declarations: [
ParentPage,
],
imports: [
StarRatingModule,
IonicPageModule.forChild(ParentPage),
],
})
export class ParentPageModule {}
Step 3.
To get the changed rating in the parent component,
You need to use events from ionic package.
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Events } from 'ionic-angular';
#Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
constructor(public navCtrl: NavController,
public events: Events) {
events.subscribe('star-rating:changed', (starRating) => {console.log(starRating)});
}
}
l’m developing app which uses a json file it works perfectly in local server, but isn't display weather data from an API Json .
Here is the code :
RedditData.ts
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import 'rxjs/add/operator/map';
#Injectable()
export class RedditData {
private url : string = "http://api.wunderground.com/api/d8585d80376/lang:AR/conditions/geolookup/q/ormm.json";
constructor(public http: HttpClient) {
console.log('Hello RedditData Provider');
}
getRemoteData(){
return this.http.get(this.url)
}
}
home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { RedditData } from '../../providers/reddit-data/reddit-data';
import { HttpClient } from '#angular/common/http';
import 'rxjs/add/operator/map';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
weather: any={};
constructor(public navCtrl: NavController, public redditService: RedditData) {
}
ionViewDidLoad(){
this.redditService.getRemoteData()
.subscribe(weather => {
console.log(weather)
this.weather.current_observation;
});
}
}
the code working fine in console with out any error , but no information in html
<ion-header >
<ion-navbar color="primary">
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding *ngIf="weather">
<p > {{weather.observation_time}}</p>
</ion-content>
You're not assigning the data to the component property:
ionViewDidLoad(){
this.redditService
.getRemoteData()
.subscribe((weather: any) => {
console.log(weather)
this.weather = weather.current_observation; // <-- here!
});
}
i am new to ionic and recently i tried to create a shared component so that i can sort of remove duplicate coding of same content on different page. It consist of a notification bar and a panel that have a login/signup button. I am able to display the notification bar and the login panel on pages that i want but i am unable to call the function of the login/signup button.
Whenever i click the login/signup button, it will said presentLoginModal() is not a function. Below are my code.
Hope someone can advice me on this. Thanks.
shared.module.ts
import {NgModule} from '#angular/core';
import {IonicPageModule} from 'ionic-angular';
import {NotificationComponent} from '../notification/notification';
import {NonLoginComponent} from '../nonlogin/nonlogin';
#NgModule({
imports: [IonicPageModule.forChild(NotificationComponent),IonicPageModule.forChild(NonLoginComponent)],
declarations: [NotificationComponent, NonLoginComponent],
exports: [NotificationComponent, NonLoginComponent]
}) export class SharedModule {}
nonlogin.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import {Login} from '../login/login';
import {Register} from '../register/register'
#IonicPage()
#Component({
selector: 'app-nonlogin',
templateUrl: './nonlogin.html'
})
export class NonLoginComponent {
constructor(public navCtrl: NavController) {}
presentLoginModal() {
let loginModal = this.modalCtrl.create(Login, {showBackdrop: true, enableBackdropDismiss: true},{cssClass: 'logon'});
loginModal.present();
}
presentRegisterModal(){
let registerModal = this.modalCtrl.create(Register, {showBackdrop: true, enableBackdropDismiss: true},{cssClass: 'register'});
registerModal.present();
}
}
notification.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'app-notification',
templateUrl: './notification.html'
})
export class NotificationComponent {
constructor(public navCtrl: NavController) {}
}
nonlogin.html
<div class="toppanel"><div class="leftside"><img class="companylogo"
src="../../assets/imgs/logo.jpg"></div><div class="rightside">
<button tappable class="login" ion-button
(click)="presentLoginModal()">LOG IN</button><button tappable
class="signup" ion-button (click)="presentRegisterModal()">SIGN
UP</button></div></div>
home.html
<ion-content>
<app-notification></app-notification>
<app-nonlogin></app-nonlogin>
</ion-content>
I have been working on a project in Ionic and after running the file I got the the runtime error saying Cannot find module "../signup/signup". I then went into the project and checked to see if it the file and directory existed which it didn't. I then proceeded to create a directory and file to see if that would fix the problem and it did not. Here is the code for signup.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component(
{
templateUrl: 'signup.html'
})
export class SignupPage
{
static get parameters()
{
return [[NavController]];
}
constructor(public nav)
{
this.nav = nav;
}
}
Here is the page that I have made the import
import {Component} from '#angular/core';
import {NavController, AlertController} from 'ionic-angular';
import {SignupPage} from '../signup/signup';
import {TabsPage} from "../tabs/tabs";
import {FormBuilder, FormControl, FormGroup, AbstractControl, Validators, NgControl} from '#angular/forms';
import {AuthService} from '../../providers/auth-service';
#Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
loginForm: FormGroup;
submitAttempt: boolean = false;
constructor(public navCtrl: NavController, public fb: FormBuilder, private _auth: AuthService, private alertCtrl: AlertController) {
this.loginForm = this.fb.group({
email: ['', Validators.compose([Validators.required, Validators.pattern('^[a-z0-9]+(\\.[_a-z0-9]+)*#[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,15})$')])],
password: ['', Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(16)])]
});
}
}
Here are the files as it is setup in the directory
project directory
These are the errors I seem to be getting whenever I run ionic serve. This may also be adding to the cause of the problem
enter image description here
I have looked around and the solutions I have tried don't seem to work. I also seem to be getting an error on line 8 of my login file where it attempts to import '#angular/forms' which may be the cause of the problem. Help is gladly appreciated
Ionic 2 seems very different from 1. I used the starter project and those are my files:
Tabs.html
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
</ion-tabs>
Tabs.ts
import { Component } from '#angular/core';
import { SigninPage } from '../Auth/Signin/Signin';
#Component({
templateUrl: 'Tabs.html'
})
export class TabsPage {
tab1Root: any = SigninPage;
constructor() {
}
}
app.components.ts
import { Component } from '#angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { TabsPage } from '../pages/Tabs/Tabs';
#Component({
template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
rootPage = TabsPage;
constructor(platform: Platform) {
platform.ready().then(() => {
StatusBar.styleDefault();
});
}
}
Is there any way to show a different tab with an if condition? For example, I want to show Tabs.App.html or Tabs.Auth.html depending on an if block.
What is the best way to do it with Ionic 2?
In ionic2 every page is accompanied by it's .ts file. So if you want 2 tabs, app.html and auth.html you would need to create both these pages and their .ts file.
In that way you can write an if-statement saying:
if(1 > 2){
this.rootpage = AuthTab;
}else{
this.rootpage = AppTab;
}
ps don't forget to import your components