@victornoletosysout wrote:

I’m trying to set focus on an ion-searchbar, according to the documentation this is possible. The method “setFocus” is exactly what I’m looking for, however, that requires the input instance, which, from what I understand, is obtained by the “getInputElement” method - but here’s the question: how do I call this method to get this reference?

Posts: 1

Participants: 1

Read full topic

@harshm90 wrote:

I want to sum up all the prices when user select the checkbox

<ion-item no-lines *ngFor="let details of size;">
        <ion-checkbox item-left formControlName="size" (ionChange)="selectSize(details.size, $event)"></ion-checkbox>
        <ion-label>
          <ion-row>
            <ion-col col-6>
              <h5>{{details.size}}</h5> 
            </ion-col>
            <ion-col col-2>
              {{details.discounted_price_pretty}}
            </ion-col>
          </ion-row>
        </ion-label>
      </ion-item>

<ion-list *ngFor="let addon_cat of addon_cat">
        <ion-list-header>
          {{addon_cat.subcat_name}}
        </ion-list-header>
        <ion-item no-lines *ngFor="let addonitem of addon_subitem">
          <ion-checkbox item-left formControlName="addon" (ionChange)="selectAddon(addonitem.sub_item_name, $event)">
          </ion-checkbox>
          <ion-label style="font-size: 12px;">
            <ion-row>
              <ion-col col-8>
                <h5>{{addonitem.sub_item_name}}</h5>
                <p>{{addonitem.item_description}}</p>
              </ion-col>
              <ion-col col-4>
                <h5>{{addonitem.pretty_price}}</h5>
              </ion-col>
            </ion-row>
          </ion-label>
        </ion-item>
      </ion-list>

12312.png1264×695 108 KB

Any Help is highly appreciated

Posts: 1

Participants: 1

Read full topic

@pantarmj wrote:

In ionic3 when I push pageB on pageA and then come back to pageA, pageA was getting reloaded. But in ionic4 when I navigate back to previous page (from pageB to pageA), pageA is not getting reloaded i.e. constructor of pageA is not getting called. how to reload the previous page / component in this scenario? Some one plz help.

Posts: 1

Participants: 1

Read full topic

@coemaw wrote:

Hi , I would like to make wheel of fortune in Ionic.
May I know any plugin for it?

Posts: 2

Participants: 2

Read full topic

@Miyata wrote:

Hello everyone. Currently I’m trying to build an Ionic 3 App where I’m supposed to play a youtube video (already did this part) but if I navigate to another tab/view the video continues to play in that view. An example would be the mobile youtube app, where you can still be searching videos while the video is up and playing.

Thank’s everyone for your time.

Posts: 1

Participants: 1

Read full topic

@evripides wrote:

I have the below function that in loop call other function but every time I run it I get the in wrong position data in array , maybe I have to wait to finish the forwardGeocode to finish and after the loop continues to next? if yes how I can make it?

  News() {
    this.restProvider.getNews()
    .then(data => {
       this.NewsDetails = data;
       this.date = this.NewsDetails[1].date;
       this.day = this.NewsDetails[1].day;
      for(let i=0;i<this.NewsDetails.length;i++){
        this.full_address = this.NewsDetails[i].address + ', ' + this.NewsDetails[i].town;
        this.forwardGeocode(this.full_address);
        console.log(this.full_address);
        
      }
    });
    console.log(this.full_address);

  forwardGeocode(keyword) 
  {
        this._GEOCODE.forwardGeocode(keyword)
        .then((coordinates : NativeGeocoderForwardResult[]) =>
        {
           let str : string   = `The coordinates are latitude=${coordinates[0].latitude} and longitude=${coordinates[0].longitude}`;
           //console.log(str);
           this.results       = str;
           this.cords.push(str);
           this.plat = coordinates[0].latitude;
           this.plong = coordinates[0].longitude;

           console.log(this.cords);
           console.log(this.mylat,this.plat,this.mylongt,this.plong,'alo4');

           this.calculateDistance(this.mylat,this.plat,this.mylongt,this.plong);

           
        })
        .catch((error: any) =>
        {
           console.log(error);
           
        });
     
  }
  }```

Posts: 1

Participants: 1

Read full topic

@marwakr wrote:

Hi every body i want to integrate authentification provider in my ionic 3 mobile app to link with endpoint developed with php. who can help me please or suggest to me a good tutorial to follow

Posts: 1

Participants: 1

Read full topic

@tfrutuoso wrote:

Hi Gang,

I am building an app on which I ask an API for a authentication token. The token is stored using Storage.

The problem is that I ask the token on the authentication page (the home page), and when I need to build any other feature, I have to navigate from the beginning of the app (login page) until the level where I am implementing the new feature. In order to save time on the implementation of the new feature, I’d like to mock the authentication token by starting the ionic server and defining an environment variable, so that in my source code, I can check if the environment variable is set, if it is set, I’ll take it’s value as the authentication token and I’ll override the whole session logic.

I’ve seen the documentation, I know that maybe I can add a key-value pair inside this file: ionic.config.json but I don’t know how to access it’s content through my source code on the application.

Best,

Posts: 1

Participants: 1

Read full topic

@renangueiros wrote:

I would like to know how to implement unit form tests with karma.
I’ve implemented a test but it always gives the following error: Error: No value accessor for form control with name: 'email'

signup.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { SignupPage } from './signup.page';

const routes: Routes = [{ path: '', component: SignupPage  }];

@NgModule({
  imports: [CommonModule, FormsModule, ReactiveFormsModule, IonicModule, RouterModule.forChild(routes)],
  declarations: [SignupPage]
})
export class SignupPageModule {}

signup.page.html

<ion-header no-border>
  <ion-toolbar>

    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>

    <ion-title>
      <img src="../../../../assets/logo-colored.png">
    </ion-title>

    <ion-buttons slot="end">
      <div class="center-title-helper"></div>
    </ion-buttons>

  </ion-toolbar>
</ion-header>

<ion-content padding>

  <ion-progress-bar [hidden]="true" type="indeterminate"></ion-progress-bar>

  <img src="../../../../assets/logo-colored.png">

  <h3 text-center>Criar Conta</h3>

  <ion-list no-padding>
    <form [formGroup]="signupForm" (ngSubmit)="submitSignupForm()">

      <ion-item [ngClass]="{ 'ion-touched ion-invalid' : emailControl.invalid }">
        <ion-label position="floating">E-mail</ion-label>
        <ion-input formControlName="email" type="e-mail"></ion-input>
      </ion-item>

      <div *ngIf="emailControl.invalid" padding-start>
        <ion-note *ngIf="emailControl.hasError('required')" color="danger">
          Insira o seu endereço de e-mail
        </ion-note>
      </div>

      <ion-item [ngClass]="{ 'ion-touched ion-invalid' : passwordControl.invalid }">
        <ion-label position="floating">Senha</ion-label>
        <ion-input clearOnEdit="false" formControlName="password" type="password"></ion-input>
      </ion-item>

      <div *ngIf="passwordControl.invalid" padding-start>
        <ion-note *ngIf="passwordControl.hasError('required')" color="danger">
          Insira a sua senha
        </ion-note>
      </div>

      <ion-button [hidden]="true">Fake Button</ion-button>

    </form>
  </ion-list>

</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-button expand="block" shape="round" (click)="submitSignupForm()">Criar Conta</ion-button>
  </ion-toolbar>
</ion-footer>

signup.page.ts

import { Component, OnInit } from '@angular/core';
import { AbstractControl, FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.page.html',
  styleUrls: ['./signup.page.scss'],
})
export class SignupPage implements OnInit {

  signupForm: FormGroup;

  constructor() { }

  ngOnInit() {
    this.signupForm = new FormGroup({
      email: new FormControl(''),
      password: new FormControl(''),
    });
  }

  submitSignupForm() {
    if (this.validateForm) {

    }
  }

  get validateForm(): boolean {
    if (this.emailControl.value === '') { this.emailControl.setErrors({ required: true }); }
    if (this.passwordControl.value === '') { this.passwordControl.setErrors({ required: true }); }

    return this.signupForm.valid;
  }

  get emailControl(): AbstractControl {
    return this.signupForm.controls['email'];
  }

  get passwordControl(): AbstractControl {
    return this.signupForm.controls['password'];
  }

}

signup.page.spec.ts

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { SignupPage } from './signup.page';

describe('SignupPage', () => {
  let component: SignupPage;
  let fixture: ComponentFixture<SignupPage>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ SignupPage ],
      imports: [
        FormsModule,
        ReactiveFormsModule
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SignupPage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Full log when I run the ng test command

Error: No value accessor for form control with name: 'email'
    at _throwError (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/forms/fesm5/forms.js:2144:1)
    at setUpControl (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/forms/fesm5/forms.js:2054:1)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/forms/fesm5/forms.js:5281:1)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/forms/fesm5/forms.js:5882:1)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/forms/fesm5/forms.js:5803:1)
    at checkAndUpdateDirectiveInline (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:22085:1)
    at checkAndUpdateNodeInline (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23353:1)
    at checkAndUpdateNode (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23315:1)
    at debugCheckAndUpdateNode (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23949:1)
    at debugCheckDirectivesFn (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23909:1)

Posts: 1

Participants: 1

Read full topic

@aditbharadwaj wrote:

whenever i try to add geolocation under providers it give me this error “Type ‘GeolocationOriginal’ is not assignable to type ‘Provider’” i have imported the right geolocatin plugin.
can any1 help ?

update i solved it
*i need to add /ngx in import i think its related to ionic 4 *

Posts: 1

Participants: 1

Read full topic

@harshm90 wrote:

<ion-item no-lines *ngFor="let details of size; let i=index" style="font-size: 12px;">

        <ion-checkbox item-left formControlName="size" (ionChange)="selectSize(details.size, $event)">
        </ion-checkbox>

        <ion-label>
          <ion-row>
            <ion-col col-6>
              <h5>{{details.size}}</h5>
            </ion-col> 
            <ion-col col-2 >
              {{details.pretty_price}}
            </ion-col>
          </ion-row>
        </ion-label>
      </ion-item>

I get the value of details.size but how can i retrieve prices along with sizes when user selects any checkbox?

Posts: 2

Participants: 2

Read full topic

@tfrutuoso wrote:

Hi Everybody!

I am building an ionic app, and I have a concern regarding the proper function of it.

My app has a login feature, and I need to get an authentication token from a server in order to make the subsequent calls to it.

For this purpose, I’d like to ensure that I have this authentication token in everyone of my pages, so that if I check on the dashboard page the authentication token and it doesn’t exists, I’ll redirect the user to the login page.

Is there any way to create a hook in some kind of “global” page, or in the class where my pages are inheriting it’s class? I know I could use the ionic lifecycle and hook there my login verification, but if I do it this way, I’d have to check on every one of my new pages, and I will be not following the DRY principle. I’d rather like to put a method on the app.component.ts file, and hook the method on that file. Is it possible?

Best,

Posts: 1

Participants: 1

Read full topic

@juanma97 wrote:

Good morning, I have a problem with Google Maps, all work correctly with ‘ionic cordova run browser’, but with ‘ionic serve’ not work in mobile phone, I want execute in mobile Android, real device. And I have the next error:

core.js:15714 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'BaseClass' of null
TypeError: Cannot read property 'BaseClass' of null
    at GoogleMap.BaseClass (index.js:246)
    at new GoogleMap (index.js:1094)
    at GoogleMapsOriginal.create (index.js:203)
    at EventDetailsPage.webpackJsonp.166.EventDetailsPage.loadMap (event-details.ts:47)
    at event-details.ts:31
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:17289)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:17280)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)
    at e.invokeTask [as invoke] (polyfills.js:3)
    at p (polyfills.js:2)
    at HTMLImageElement.v (polyfills.js:2)

How I execute in mobile phone?

I have google-maps 5.0.0 beta 22

And the file .ts here:

import { Component, ViewChild, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import { GoogleMaps, GoogleMap, GoogleMapOptions, Environment } from '@ionic-native/google-maps';

@IonicPage()
@Component({
  selector: 'page-event-details',
  templateUrl: 'event-details.html',
})
export class EventDetailsPage{

  @ViewChild('map') element;
  map: GoogleMap
  event: any;
  slideOpts = {
    effect: 'flip'
  };

  constructor(public navCtrl: NavController, 
    public navParams: NavParams, 
    public platform: Platform) {
    this.event = navParams.data;
  }

  goBack() {
    this.navCtrl.pop();
  }  

  ngAfterViewInit() {
    this.platform.ready().then(() => {
      this.loadMap();
    });
  }

  loadMap() {
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: this.event.latitude, // default location
          lng: this.event.longitude // default location
        },
        zoom: 18,
        tilt: 30
      }
    };
  
    this.map = GoogleMaps.create('map_canvas', mapOptions);
  }


}

Thank you!

Posts: 1

Participants: 1

Read full topic

@Sargo wrote:

Hi,

I’ve been trying to convert an Ionic3 project to Ionic4. I’ve been having a bit of trouble since the navParams don’t work the same way as they used to. This is the piece of code I want to change from Ionic3 to Ionic4.

let localData = http.get(‘assets/mylist.json’).map(res => res.json().items);
localData.subscribe(data => {
this.information = data;
for (var i = 0; i < this.information.length; i++) {
this.information[i].open = false;
}
this.toggleSection(navParams.data);
})

It loops through the Json and parses the information to an accordeon list.

I’ve tried this, but with no luck:

localData.subscribe(data => {
this.information = data;
for (var i = 0; i < this.information.length; i++) {
this.information[i].open = false;
}
this.toggleSection(this.activatedRoute.snapshot.paramMap.get(data));
})

How would I parse my JSON to my accordeon list in Ionic4?

Posts: 1

Participants: 1

Read full topic

@adsfelipe wrote:

Hello, in ionic 3 the input highlight only work on Android, so to add this to IOS it needed

$text-input-ios-show-focus-highlight: true;

But how can i do this on ionic 4?
couldn’t find anything on docs…
thanksss

Posts: 1

Participants: 1

Read full topic

@condacore wrote:

Hey,

I’m using Ionic 4 + Angular 7 (HttpClient) to fetch JSON data from my WordPress installation. There isn’t a problem if the App runs in Browser or via --livereload. CORS also is enabled on my Server.

But if I finally build the app with Cordova (iOS), the data isn’t loading anymore. I see a http request on my server and the app seems to receive the data. But it isn’t displayed anymore. With static JSON files or with the Google Maps API everything works fine. It seems to be a problem with wordpress combined with Cordova. (Using Cordova iOS 5.0.0).

All Plugins and node modules are up to date. Whitelist Plugin is installed and configured and even the Content-Security-Policy meta tag is present.

Someone else facing this issue?

Best Regards
Marius

Posts: 1

Participants: 1

Read full topic

@yogeshyoyo wrote:

Hi,

can anyone help me how to achieve this in ionic3/4. i wanted to show the conference room which is available. so wanted a scheduler view for this.

scheduler.jpg1280×720 71.7 KB

Posts: 1

Participants: 1

Read full topic

@TayKara wrote:

Hello,
First, I have to prevent you that I’m not an english speaker, so excuse me if I write like a kid
I’m working on a Progressive Web App that purpose some functionnality, like using camera, receiving and sending notifications with firebase, recognize speech, read sensors in real time, etc.
But quickly, I was stopped by PWAs’ limitation. I wanted to read sensors in background, but it seems like it’s actually impossible, because the API is not usable in a Web Worker. (I’ve posted a message in stackoverflow : here , and I’m waiting for a response so if you have an idea to resolve my problem, I will appreciate the help).

Because of this, I have to build my PWA to an Hybrid App, I tought that it would be easy but it wasn’t.
So in brief, I would like to have a PWA AND a Hybrid App. For example, I’m unable to use Firebase in Hybrid, because I use the official Firebase package and not ionic-native/cordova…

In the PWA version I want to do everything that’s possible to do, and in the Hybrid App version, I want to do all of PWA functionnalities plus what’s not possible to do (like reading sensors in background).
The problem is that I use a lot of Web Oriented API in my PWA (SpeechRecognition, Mediacapture, Firebase, etc), and I can’t use some of them in the Hybrid Version.

So my question is : how could you do to implemant same functionnalities in both PWA and Hybrid versions ?

One more time, I apologize for my poor english, tell me if you didn’t understand something or if you wan’t more precisions, I will respond you with pleasure.

Posts: 1

Participants: 1

Read full topic

@RomnEmpire wrote:

Hi to all,
I have to implement notofication in our app.tell m which notification we have to used.in our app we have sent notification to another user after user request is accept in ionic3.tell m anyone how to implement this type of notification?

Posts: 1

Participants: 1

Read full topic

@WebmasterAB wrote:

I now have the LOCAL_ID for the whole app in app.module.ts and it works.

But it can also be separate for each page.
So that I can use it to translate the dates.

Posts: 1

Participants: 1

Read full topic