@Himanshutongya wrote:

I have used background plugin but that is crashing our app on diff android versions like Android 9.

Posts: 1

Participants: 1

Read full topic

@whereskeem wrote:

I’m using ionic slides and there’s a form on each slide. Sometimes I have to click the submit button multiple times before the click event executes, or at the very least i’ll have to click somewhere in the current browser window for the click event to register.

page with slides HTML

<ion-slides effect="fade">
			<ion-slide>
				<ion-card class="amc-card">
					<ion-card-header>
						<h1 text-wrap>
							{{'global.title' | translate}}
						</h1>
					</ion-card-header>
					<ion-card-content>
						<h2 text-wrap id="verify-title" class="custom-h2">
							{{title}}
						</h2>
						<verify-form [showProgress]="showProgress" (outputSubmitVerifyForm)="verifyForm($event)"></verify-form>
					</ion-card-content>
				</ion-card>
			</ion-slide>
			<ion-slide>
				<ion-card class="amc-card">
					<ion-card-header>
						<h1 text-wrap>
							{{'global.title' | translate}}
						</h1>
					</ion-card-header>
					<ion-card-content>
						<h2 text-wrap id="info-title" class="custom-h2">
							{{title}}
						</h2>
						<enter-info-form [name]="name" (outputSubmit)="enterInfoForm($event)"></enter-info-form>
					</ion-card-content>
				</ion-card>
			</ion-slide>
</ion-slides>

page with slides TS

import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
import { IonicPage, NavController, NavParams, Content, Events, Slides } from 'ionic-angular';
import {Validators, FormBuilder } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';

@IonicPage()
@Component({
  selector: 'page-password-reset-initial',
  templateUrl: 'password-reset-initial.html',
})
export class PasswordResetInitialPage {
  @ViewChild(Content) content: Content;
  @ViewChild(Slides) slides: Slides;
  constructor() {
  }

ionViewDidEnter(){
    this.slides.enableKeyboardControl(false);
    this.slides.onlyExternal = true;
  }

enterInfoForm(event) {
}

verifyForm(event) {
}
}

Posts: 1

Participants: 1

Read full topic

@brianivander wrote:

I’ve followed this steps (https://ionicframework.com/docs/appflow/quickstart/installation) and allow my app to receive code push / hot update through ionic Appflow. However now I have unexpected error, which is, my app suddenly changed from the PRODUCTION to DEVELOPMENT.

This always happen.

The way I can replicate this issue is, I open the app, then I close it. Then I wait about 5 minutes, then when I open the app again, it suddenly in the development environment

My workaround now is to change my environment in DEV to use the PROD parameters.

Anybody has this issue? Or how to solve it properly?

Thanks

Posts: 1

Participants: 1

Read full topic

@whereskeem wrote:

Using nx-translate I populate an array with text. This array gets populated during ionViewDidEnter(). On the HTML page I pass the array to a custom component called verify-form which passes the array to another custom component called progress-bar, within the progress-bar custom component I have a *ngFor loop to display the text in this array in a list but sometimes the list will show blank. I may have to refresh the page several times before the text appears.

parent page HTML

<ion-slides effect="fade">
			<ion-slide>
				<ion-card class="amc-card">
					<ion-card-header>
						<h1 text-wrap>
							{{'global.title' | translate}}
						</h1>
					</ion-card-header>
					<ion-card-content>
						<h2 text-wrap id="verify-title" class="custom-h2">
							{{title}}
						</h2>
						<verify-form [stages]="stages" (outputSubmitVerifyForm)="verifyForm($event)"></verify-form>
					</ion-card-content>
				</ion-card>
			</ion-slide>
			<ion-slide>
				<ion-card class="amc-card">
					<ion-card-header>
						<h1 text-wrap>
							{{'global.title' | translate}}
						</h1>
					</ion-card-header>
					<ion-card-content>
						<h2 text-wrap id="info-title" class="custom-h2">
							{{title}}
						</h2>
						<enter-info-form [name]="name" (outputSubmit)="enterInfoForm($event)"></enter-info-form>
					</ion-card-content>
				</ion-card>
			</ion-slide>
</ion-slides>

parent page TS

import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
import { IonicPage, NavController, NavParams, Content, Events, Slides } from 'ionic-angular';
import {Validators, FormBuilder } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';

@IonicPage()
@Component({
  selector: 'page-password-reset-initial',
  templateUrl: 'password-reset-initial.html',
})
export class PasswordResetInitialPage {
  stageOne:string;
  stageTwo:string;
  stageThree:string;
  stageFour:string;
  stages: any;
  @ViewChild(Content) content: Content;
  @ViewChild(Slides) slides: Slides;
  constructor(public translate: TranslateService) {
this.translate.get(['page.passwordResetInitial.progressBar.stages.forgotPassword','page.passwordResetInitial.progressBar.stages.verifyOne','page.passwordResetInitial.progressBar.stages.verifyTwo','page.passwordResetInitial.progressBar.stages.createPassword'])
    .subscribe((res:string) => {
      this.stageOne = res['page.passwordResetInitial.progressBar.stages.forgotPassword'],
      this.stageTwo = res['page.passwordResetInitial.progressBar.stages.verifyOne'],
      this.stageThree = res['page.passwordResetInitial.progressBar.stages.verifyTwo'],
      this.stageFour = res['page.passwordResetInitial.progressBar.stages.createPassword']
    });
  }

ionViewDidEnter(){
    this.stages = [
      [this.stageOne,'active'],
      [this.stageTwo,'future'],
      [this.stageThree,'future'],
      [this.stageFour,'future']
    ];
  }

enterInfoForm(event) {
}

verifyForm(event) {
}
}

verify-form custom component HTML

<progress-bar [stages]="stages" ></progress-bar>
<form [formGroup]="verifyForm" (ngSubmit)="submitVerifyForm()">
..........
</form>

verify-form custom component TS

import { Component, Input, Output, EventEmitter } from '@angular/core';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'verify-form',
  templateUrl: 'verify-form.html'
})
export class VerifyFormComponent {

  @Input() stages:any;
  @Output() outputSubmitVerifyForm = new EventEmitter();
  verifyForm: FormGroup;

  constructor(public formBuilder: FormBuilder) {
    this.verifyForm = this.formBuilder.group({
      verify: ['', Validators.required]
    });
  }

  submitVerifyForm() {}
  }

}

progress-bar HTML

<div class="progress-bar-div">
	<ul class="progress-bar-ul" role="list" *ngFor="let stage of stages;let i = index">
		<li role="listitem" [class]="stage[1]">
			{{i+1}}. {{stage[0]}}
		</li>
	</ul>
</div>

progress-bar TS

import { Component, Input } from '@angular/core';

@Component({
  selector: 'progress-bar',
  templateUrl: 'progress-bar.html'
})
export class ProgressBarComponent {

  @Input() stages:any;

  constructor() {
  }
}

Posts: 1

Participants: 1

Read full topic

@Anouar1911 wrote:

how can i use the gyroscope commande in my App

Posts: 1

Participants: 1

Read full topic

@_oliver wrote:

Just a heads up for everyone that uses the above setup.

I created two tickets, hoping that someone with sufficient (plugin) coding skills can pick this up:

Cheers,
Oliver

Posts: 1

Participants: 1

Read full topic

@rubenmgar wrote:

Hi,
I’ve a problem with an image, running in device (iOS). The image is a background-image, for “barra”. “barra” is a ion-toolbar in ion-header. This code is in app/app.scss

.barra {
  background-color: transparent;
  background-image: url("../assets/img/pantalla-inici5_fons_up.png");
  background-size: 100% 50px;
  background-repeat: no-repeat;
  background-position: left top;
  height: 80px !important;
  width: 100%;
  border-bottom: none;
  padding-top: 0;
  font-size: 12px;
}

But I use another image, and it works!

ion-content {
background-image: url("../assets/img/fons1.jpg");
-webkit-background-image: url("../assets/img/fons1.jpg");
color: #fff;
}

Both images are in src/assets/img. When I create IPA, and copy to device, ion-content backgorund is shown, but “barra” background, no. Safari shows “Failed to load resource: The requested URL was not found on this server. file:///var/containers/Bundle/Application/______/______.app/www/build/assets/img/pantalla-inici5_fons_up.png”

I’ve seen some other topics, about images folders, and trying to change “assets” path.

Any ideas? Thank you!

Posts: 1

Participants: 1

Read full topic

@truptijoshi21 wrote:

Using ionic-v3: We have add button on home page,on click of which modal will be opened to add notes. After closing of that modal, no ionic life cycle hooks are getting called like ionViewDidEnter() or ionViewWillEnter(). We want to refresh home page with latest saved data after closing of saved notes modal.

Posts: 1

Participants: 1

Read full topic

@lalitv wrote:

Please help me with the issue which I have never seen before. The issue is when the page comes from multiple redirects then some of the features on the page are not working properly. Like segment, rating form, form validation. It starts working when I rotate the device (In Browser) it’s working.

When I first login and then page redirected to a Home page, the segment on the home page is not working but when I open the home page from the sidemenu then it’s working. Same issue on the Rating form page.

Not getting what’s the issue because there is no error in console. Please help me if someone has the same issue before.

Here is the output of the ionic info

Ionic:

ionic (Ionic CLI) : 4.6.0
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.1

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.0.0, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 1.2.1, (and 4 other plugins)

System:

Android SDK Tools : 26.1.1 (C:\android\sdk)
NodeJS : v10.15.0 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 7

Posts: 1

Participants: 1

Read full topic

@OmDIonic wrote:

Hi All
I am developing Ionic app but while testing on Android emulator it is showing nothing after splash screen.

Ionic Info:
Ionic:
ionic (Ionic CLI) : 4.10.2
Ionic Framework : @ionic/angular 4.0.0
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/angular-toolkit : 1.3.0

Cordova:
cordova (Cordova CLI) : 7.1.0
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 5 other plugins)

System:
Android SDK Tools : 26.1.1
NodeJS : v10.15.1
npm : 6.4.1
OS : Windows 10

Posts: 1

Participants: 1

Read full topic

@1Abhinavmaurya2 wrote:

Implemented native google map in our app but i don’t no how to add autocomplete place API anyone can help me.

Posts: 1

Participants: 1

Read full topic

@Sasol wrote:

Good day all

I am building my first ionic 4 mobile application, and have a question about how label, icons and other elements can be connected to a form input.

In normal HTML forms you have a relationship between labels and inputs using the “for” attribute, like so:

<label for="name">Please enter name</label>
<input type="text" id="name" name="name"/> 

With this relationship in place the input field gains focus when you either click on the label or on the input itself to gain focus on the input.

In ionic you use ion-label and ion-input instead of the default HTML form elements, and these seem to not share this capability.

I am specifically interested in using an icon as the aforementioned label. I tried the following without any success:

<ion-item>
  <ion-label for="searchText">
    <ion-icon name="search"></ion-icon> <!--name here refers to the icon displayed-->
  </ion-label>
  <ion-input id="searchText" name="searchText" type="text" placeholder="Search" ></ion-input>
</ion-item>

Is there something similar that one can use, or do I need to use JavaScript to achieve this?

Any advice would be greatly appropriated

Posts: 1

Participants: 1

Read full topic

@InfantJoseph wrote:

I want o set background image for Ionic 4 Application (all page). This was pretty straight forward when using Ionic 3 but the same approach didn’t worked here. I read the theming of Ionic 4 but I couldn’t find a way to set an image as background.

As given in the document, background colour can be set and it worked.

:root {
    --ion-background-color: linear-gradient(197deg, rgba(100,100,100,1) 0%, rgba(63,63,63,1) 13.5%, rgba(29,29,29,1) 33.33%, rgba(0,0,0,1) 100%) !important;
}

But on setting the image as background, it didn’t responds,

:root {
    --background: url('assets/imgs/appBg.png') no-repeat fixed center; 
}
 As well, setting remote images worked by local images didn't worked. The below is the working code

ion-content{
  --background: url(https://i.stack.imgur.com/mSXoO.png)!important;
  --background-repeat: no-repeat;
  --background-size:100% 100%;
}

And the below didn't worked.

ion-content{
    --background: url(../../assets/imgs/appBg.png) !important;
    --background-repeat: no-repeat;
    --background-size:contain;
  }

Like to know what is the possible way to set image background in Ionic 4. Thanks.

Posts: 1

Participants: 1

Read full topic

@mavillavishnu wrote:

Hello all,
I am working on an app where on click of a button redirects to a new page with tabs “project-details”. I have created the routing for the page too. Here is the routing:

const routes: Routes = [
  {
    path: 'project-details',
    component: ProjectDetailsPage,
    children: [
      {path: 'pd-tabs-info',children: [{path: '',loadChildren: './pd-tabs-info/pd-tabs-info.module#PdTabsInfoPageModule'}]},
      {path: 'pd-tabs-scope',children: [{path: '',loadChildren: './pd-tabs-scope/pd-tabs-scope.module#PdTabsScopePageModule'}]},
      {path: 'pd-tabs-contacts',children: [{path: '',loadChildren: './pd-tabs-contacts/pd-tabs-contacts.module#PdTabsContactsPageModule'}]},
      {path: 'pd-tabs-news',children: [{path: '',loadChildren: './pd-tabs-news/pd-tabs-news.module#PdTabsNewsPageModule'}]},
      {path: 'pd-tabs-milestones',children: [{path: '',loadChildren: './pd-tabs-milestones/pd-tabs-milestones.module#PdTabsMilestonesPageModule'}]},
      {path: '',redirectTo: '/project-details/pd-tabs-info',pathMatch: 'full'}
    ]
  },
  {
    path: '',
    redirectTo: '/project-details/pd-tabs-info',
    pathMatch: 'full'
  }
];

But i get the below error and the page won’t initialize:
Error: Cannot match any routes. URL Segment: 'project-details/pd-tabs-info'

Please help. Thanks in advance!

Posts: 1

Participants: 1

Read full topic

@naveenvuppu wrote:

My location option not showing in google maps.

loadMap() {
this.geolocation.getCurrentPosition().then((position) => {
let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

  let mapOptions = {
    center: latLng,
    zoom: 10,
    streetViewControl: false,
    zoomControl: false,
    mapTypeControl: false,
    controls : {
      compass : true,
      myLocationButton : true,
      myLocation: true,
      indoorPicker : false,
      zoom : false,
      mapToolbar : true
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP,

  }

Posts: 1

Participants: 1

Read full topic

@lsantaniello wrote:

Hi guys,
I integrated Onesignal library into my app but when I try to init, I have an exception.

my app.component.ts

this.oneSignal.startInit(APP_ID, FIREBASE_SENDER_ID );
this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.InAppAlert);
     
this.oneSignal.handleNotificationReceived().subscribe(() => {
      alert("handleNotificationReceived");
});
     
this.oneSignal.handleNotificationOpened().subscribe(() => {
      alert("handleNotificationOpened");
});
     
this.oneSignal.endInit();

"Uncaught (in promise): TypeError: object is not a function
TypeError: object is not a function
    at OneSignal.startInit (http://localhost/build/vendor.js:85108:151)
    at MyApp.enablePush (http://localhost/build/main.js:734:24)
    at http://localhost/build/main.js:761:19
    at t.invoke (http://localhost/build/polyfills.js:3:14976)
    at Object.zone._inner.zone._inner.fork.onInvoke (http://localhost/build/vendor.js:5445:33)
    at t.invoke (http://localhost/build/polyfills.js:3:14916)
    at r.run (http://localhost/build/polyfills.js:3:10143)
    at http://localhost/build/polyfills.js:3:20242
    at t.invokeTask (http://localhost/build/polyfills.js:3:15660)
    at Object.zone._inner.zone._inner.fork.onInvokeTask (http://localhost/build/vendor.js:5436:33)"

Could you please support me?

Thanks

Posts: 3

Participants: 2

Read full topic

@tokuhara wrote:

Is there any alternative for ion-slides?
In ionic 3 the ion-slides do not work well with ngFor and in v4 it do not have all the effects (fade, cube…).
I have tried to use swiper but it doesn’t work, I think there are some conflicts with ion-slides and the swiper library.
Really in need for slides with fade, autoplay and loop.

Posts: 1

Participants: 1

Read full topic

@franzisk4sis wrote:

Hey guys,

I noticed that when I load a “page” on the tabs it goes very fast but when I load from a left menu it takes some seconds to load, it seems that it reloads everything every time.

On the left menu I have something like:

<ion-item [href]="link.url" [class.active-item]="link.active" routerDirection="root">
  <fa-icon [icon]="link.icon" slot="start"></fa-icon>
  <ion-label>{{link.title}}</ion-label>
</ion-item>

I made a video running the app on a real device.
Video Example

Am I doing anything wrong on the left menu?

Posts: 1

Participants: 1

Read full topic

@sdhupe19 wrote:

My code is

<button ion-button icon-left block (click)=“signInWithGoogle()”>

{{“Log in with Google” | translate}}

import { TranslateService,} from ‘@ngx-translate/core’;
constructor{// delarations here//}
this.lang = ‘en’;
this.translate.setDefaultLang(‘en’);
this.translate.use(‘en’);

switchLanguage() {
this.translate.use(this.lang);
}

and I am getting an error as
Error: Template parse errors:
The pipe ‘translate’ could not be found ("

  {{[ERROR ->]"Log in with Google" | translate}}

  </button>

Posts: 1

Participants: 1

Read full topic

@lunneyd wrote:

Screenshot 2019-02-18 at 14.58.04.png738×1072 266 KB

I have tabs and my map displays but I have to scroll to see the bottom of it and footer not showing. Any ideas how to avoid this. See the minus showed be showing without scrolling.

I have tabs too which is probably causing the issue. Any ideas how to fix.

Posts: 1

Participants: 1

Read full topic