@nunoarruda wrote:

I want to hide or show elements when there is or there isn’t a scrollbar on ion-content. More specifically, I want to show a button (to load more items in a list) when there’s no scrollbar and hide it where there is a scrollbar (so the loading of more items is done by ion-infinite-scroll).

My Ionic app will also be deployed to the desktop so users with large screens won’t initially see a scrollbar and thus ion-infinite-scroll won’t be triggered.

Here’s a demo that showcases the issue:

ionic-scrollbar.gif996×1636 2.59 MB

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic header
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <p *ngFor="let item of itemList">{{ item }}</p>

    <!-- How to hide this button when ion-content has a scrollbar? -->
    <!-- *ngIf="???" -->
    <ion-button (click)="incrementItemList(5)">Load more items</ion-button>
  </div>

  <ion-infinite-scroll (ionInfinite)="loadMoreItems($event)">
    <ion-infinite-scroll-content loadingSpinner="crescent"></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title>
      Ionic footer
    </ion-title>
  </ion-toolbar>
</ion-footer>

home.page.ts

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  itemList: string[] = [];

  constructor() {}

  ionViewWillEnter() {
    this.incrementItemList(5);
  }

  incrementItemList(times: number) {
    for (let i = 1; i <= times; i++) {
      this.itemList.push(`Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia placeat nam sapiente iusto eligendi`);
    }
  }

  loadMoreItems(event: any) {
    setTimeout(() => {
      this.incrementItemList(15);
      event.target.complete();
    }, 1000);
  }

}

I’m using Ionic 4.5.0 + Angular.

I have tried using getScrollElement, scrollHeight, clientHeight, offsetHeight, but with no success.

Any ideas?

Posts: 1

Participants: 1

Read full topic

@Sakkreerin wrote:

66671.jpg892×1834 38.8 KB

I already change the clearTextTrafficPermitted=“true” but it still not working. I dont know Is it relate to the android version ? because I use samsung s8 android version 9 but I tried the mi phone android version 8 and it works well!. Any suggestion ?! Please help I have no idea to do with that now.

Thanks in advance.

Posts: 1

Participants: 1

Read full topic

@lcmassena wrote:

I am using a method to render some list items.
Assuming the part.isAvailable = false the second ion-item should never be visible.
But the framework is injecting the hydrated class event when it should not be used and the element is always visible.

How to prevent the hydrated class on start?

function renderPart(view: QuoteAnswersView, part: IPart, dismantlingId: string): JSX.Element {
	return ([
		<ion-item class="item-label item ios in-list ion-focusable hydrated" id={part.id}>
			<ion-toggle checked={part.isAvailable} slot="start"
				onIonChange={(e: CustomEvent<ToggleChangeEventDetail>) => view.partChanged(part, e.detail.checked)}></ion-toggle>
			<ion-label class="sc-ion-label-ios-h sc-ion-label-ios-s ios hydrated">{part.name}</ion-label>
		</ion-item>,
		<ion-item class={part.isAvailable == true ? 'item-label item ios in-list ion-focusable hydrated' : 'item-label item ios in-list ion-focusable inactive'}>
			<ion-icon name="logo-usd"></ion-icon> {part.isAvailable.toString()} <ion-input value="{part.price}"
				ref={(el: HTMLIonInputElement) => MoneyInput.mask(el)}
				onIonChange={(e: CustomEvent<InputChangeEventDetail>) => view.partPriceChanged(part, dismantlingId, e)}></ion-input>
		</ion-item>
	]);
}

Posts: 1

Participants: 1

Read full topic

@ctfrancia wrote:

hey guys so I am making a Contacts page where the last names are grouped based on the first letter. All last names beginning with A are grouped under ‘A’, etc. I have the problem where that isn’t the case. It creates a header for all of them. If I have two people with the last name of ‘Smith’ then both of them will have the header ‘S’.
here is my html

<ion-content>
  <ng-container *ngIf="contactList$">
    <ion-virtual-scroll [items]="contactList" [ngClass]="{ dinamicBorders: results }" [headerFn]="headerFn">
      <ion-item-divider *virtualHeader="let header">
        {{ header }}
      </ion-item-divider>
      <ion-item *virtualItem="let c" [ngClass]="{ 'hide-item': c.empty }">
        <ion-thumbnail slot="start">
          <img [src]="c.profilePicture" />
        </ion-thumbnail>
        <ion-label position="stacked">{{ c.lastNames }}, {{ c.firstNames }} - {{ c.specialty }}</ion-label>

        <ion-label position="stacked">{{ c.hospitals[name] }}</ion-label>
      </ion-item>
    </ion-virtual-scroll>
  </ng-container>

and here is contact.ts

  public headerFn(record: Contact, recordIndex: number, records: Contact[]): string {
    let i: string;
    const char = record.lastNames[0].toUpperCase().replace('À', 'A');
    if (char !== i) {
      i = record.lastNames[0];
      return record.lastNames[0].toUpperCase();
    }
    return null;
  }

Posts: 1

Participants: 1

Read full topic

@Rotestasd wrote:

I noticed some major performance issues in my ionic project, so i checked what was going on, and found out that my *ngIf is triggered every time i click somewhere or the window is resized. I setup a new clean ionic project and it also seems to happen there. I re-created the same scenario in a blank angular project without ionic, and it doesn’t happen there, so it might be an ionic-only issue.

Sample Code:
app.component.html

<div *ngIf="test()"></div>

app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  test(){
    console.log('change');
  }
}

04-07-_2019_10-09-38.png1131×140 6.29 KB

This is the browsers output, notice that the log message was called 180+ times after resizing the window…
What is the issue here? Is it a bug? Is it expected behavior? It doesn’t seem to happen in a blank angular project.

I read some things about using changeDetection with OnPush, but then my Observables and BehaviorSubjects from my Services aren’t working anymore

Ionic Version:
Ionic CLI : 5.0.0 (C:\Users\admin\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.4.2
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Posts: 1

Participants: 1

Read full topic

@swissfritz wrote:

I have a new Macbook and would like to get the latest version of an existing app from the Appflow repository. Do I need to start the app in my file system first before I do ionic link | git pull ionic master? And what do I have to delete for this command to work? I get the error “fatal: refusing to merge unrelated histories”.

Posts: 1

Participants: 1

Read full topic

@Harikag wrote:

Hi, I have data , I am displaying dat through ngFor, But whenever user gives reply it need to add same data to forloop and need to display how can we do , please help me. Thanks. I should not reload the page again to see latest message.

Posts: 1

Participants: 1

Read full topic

@RiddlezLaher wrote:

How easy would it be to implement ember JS into IONIC just as vue and react has been implemented

I need some guidance but am interested i’m implementing it if knowledge permits

Posts: 1

Participants: 1

Read full topic

@premktr wrote:

I am new to ionic4/angular4.i need to upload the profile pic to database.i wrote code but I don’t know whether it is correct or not and when I am uploading it I am getting the above-mentioned error. backend he is using Django and backend is correct only other requests is accepting
.ts

getPicture() {
const options: CameraOptions = {
  quality: 70,
  destinationType: this.camera.DestinationType.FILE_URI,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE,
  allowEdit: false,
  sourceType: this.camera.PictureSourceType.CAMERA,
  correctOrientation: true,
  saveToPhotoAlbum: false
};

this.camera.getPicture(options).then(
  imageData => {
    // imageData is either a base64 encoded string or a file URI
    // If it's base64 (DATA_URL):
    this.image = this.sanitizer.bypassSecurityTrustUrl(
      "data:Image/*;base64" + imageData
    );
    // this.imageURI = imageData;
    this.profileService
      .postInfluencerProfile(this.image, null, null)
      .subscribe(
        response => {
          console.log(response);
        },
        (error: MavinError) => {
          if (error instanceof NotFoundError) {
            alert("Not found");
          } else {
            console.log(error);
          }
        }
      );
  },
  err => {
    // Handle error
  }
);

service.ts

postInfluencerProfile(
    profilePic: File,
    name: string,
    emailId: string
  ): Observable<any> {
    const url = "****************";
    const apiKey = "************";
    const sessionID = localStorage.getItem("sessionID");
    const formdata = new FormData();
    formdata.append("file", profilePic);
    console.log(formdata);
    const loginContext = {
      user_agent:
        "Dalvik/2.1.0 (Linux; U; Android 6.0.1; Nexus Player Build/MMB29T)"
    };
    const postData = {
      api_key: apiKey,
      session_id: sessionID,
      profile_picture: profilePic,
      display_name: name,
      email_id: emailId
    };
    const httpOptions = {
      headers: new HttpHeaders({
        "Content-Type": "multipart/form-data;"
      })
    };
    // delete httpOptions.headers['Content-Type'];
    console.log(postData);
    return this.http.post(url, postData, httpOptions);
  }

Posts: 1

Participants: 1

Read full topic

@hanane95 wrote:

Hello guys, i need how can use cloud functions but without deploy, because another person do this part.
i need just use in my app ionic v4
Thanks

Posts: 1

Participants: 1

Read full topic

@hn162 wrote:

Hi,

I’m developing an ionic 3 application in which I need to show the camera interface inside the app screen and camera-preview seems to be the right and only solution to go with at this moment. However, when I trigger the startCamera function, I always get the error ’ Object(…) is not a function at CameraPreview.startCamera’. Any help would be much appreciated.

Here are the steps I used for the installation:

1. From CLI:
   ionic cordova plugin add https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git
   npm install @ionic-native/camera-preview

2.Add to the provider list in module.ts file

import { CameraPreview } from '@ionic-native/camera-preview/ngx';
.....
providers: [  
    CameraPreview, ...
]

Below is the page where I would use the plugin:

import { Component, NgZone } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { CameraPreview, CameraPreviewPictureOptions, CameraPreviewOptions, CameraPreviewDimensions } from '@ionic-native/camera-preview/ngx';

@Component({
  selector: 'page-submitdata2',
  templateUrl: 'submitdata2.html',
})
export class Submitdata2Page {
  
  public getWidth: number;
  public getHeight: number;
  public calcWidth: number;
  cameraPreviewOpts: CameraPreviewOptions =
    {
      x: 40,
      y: 100,
      width: 220,
      height: 220,
      toBack: false,
      previewDrag: true,
      tapPhoto: true,
      camera: this.cameraPreview.CAMERA_DIRECTION.BACK
    }
  constructor(
    public cameraPreview: CameraPreview, private zone: NgZone,
    public navCtrl: NavController, public navParams: NavParams) {

    this.zone.run(() => {
      this.getWidth = window.innerWidth;

      this.getHeight = window.innerHeight;
    });
    console.log('width', this.getWidth);

    this.calcWidth = this.getWidth - 80; 

    console.log('calc width', this.calcWidth);
    }
  ionViewDidLoad() {
    console.log('ionViewDidLoad Submitdata2Page');
  }
  startCamera() {
    debugger
    this.cameraPreview.startCamera(this.cameraPreviewOpts).then(
      (res) => {
        console.log(res)
      },
      (err) => {
        console.log(err)
      });
  }


  stopCamera() {
    this.cameraPreview.stopCamera();
  }
  takePicture() {
    this.cameraPreview.takePicture()
      .then((imgData) => {
        (<HTMLInputElement>document.getElementById('previewPicture')).src = 'data:image/jpeg;base64,' + imgData;
      });
  }
  SwitchCamera() {
    this.cameraPreview.switchCamera();
  }
  showCamera() {
    this.cameraPreview.show();
  }
  hideCamera() {
    this.cameraPreview.hide();
  }
}

The HTML:

<ion-header>
    <ion-navbar>
        <ion-title>Preview Page</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>

    <h5>This is camera Preview Application..</h5>

    <div class="displaybottom">
        <button ion-button (click)="startCamera()"> Start Camera</button>
        <button ion-button (click)="stopCamera()"> Stop Camera</button>

        <button ion-button (click)="takePicture()"> Take Picture Camera</button>

        <button ion-button (click)="SwitchCamera()"> Switch  Camera</button>

        <button ion-button (click)="showCamera()"> Show Camera</button>

        <button ion-button (click)="hideCamera()"> Hide Camera</button>
    </div>

    <div class="pictures">
        <p><img id="previewPicture" width="200" /></p>
        <!--<p><img id="originalPicture" width="200"/></p>-->
    </div>

</ion-content>

My Development Enviroment:

Posts: 1

Participants: 1

Read full topic

@Dunny wrote:

Hi,

On Ionic 4, the events are never fired,

“@ionic-native/core”: “^5.9.0”,
“@ionic-native/network”: “^5.9.0”,
“cordova-plugin-network-information”: “^2.0.2”,

this.network.onDisconnect().subscribe(() => {
  console.log('network was disconnected :-(');
});

this.network.onConnect().subscribe(() => {
  console.log('network connected!');
  // We just got a connection but we need to wait briefly
   // before we determine the connection type. Might need to wait.
  // prior to doing any api requests as well.
  setTimeout(() => {
    if (this.network.type === 'wifi') {
      console.log('we got a wifi connection, woohoo!');
    }
  }, 3000);
});

Posts: 1

Participants: 1

Read full topic

@nagarajsabhahith wrote:

FileTransfer error code 3
java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.

when with http url file is going to server but when i am trying to do same with https i am getting java.security error

Posts: 1

Participants: 1

Read full topic

@BashBoss wrote:

I am trying to implement threejs in Ionic app and somehow it only renders the object for a split second, and then gives up and returns to a blank white screen. Could I get some help on this please?

Posts: 1

Participants: 1

Read full topic

@karthikmani15 wrote:

This is My Tabs routing.module.ts File Code.

const routes: Routes = [
{
path: ‘tabs’,
component: TabsPage,
children: [
{
path: ‘tab1’,
children: [
{
path: ‘’,
loadChildren: ‘…/tab1/tab1.module#Tab1PageModule’
}
]
},
{
path: ‘tab2’,
children: [
{
path: ‘’,
loadChildren: ‘…/tab2/tab2.module#Tab2PageModule’
}
]
},
{
path: ‘tab3’,
children: [
{
path: ‘’,
loadChildren: ‘…/tab3/tab3.module#Tab3PageModule’
}
]
},
{
path: ‘’,
redirectTo: ‘/tabs/tab1’,
pathMatch: ‘full’
}
]
},
{
path: ‘’,
redirectTo: ‘/tabs/tabs/tab1’,
pathMatch: ‘full’
}
];

And I Have One Button In Tab3 When i click The Button Move To Tab1.

Public nav:NavController Add it in the Constructor.

this.nav.navigateRoot(’/tabs/tab1’);

Using This code In Button Click Listener.

But Can’t Navigate Or Move To Tab1. What Will Do?

Posts: 1

Participants: 1

Read full topic

@JosephOR wrote:

Hey folks,

Ok so im about to start developing my first mobile app, but few sticky parts, mainly legal.
as a software developer, my company owns everything I create, so how to I get the application in my name?
Also, for other legal documents, how does everyone handle this? do it yourself, or a private solicitor, or some online business??

Any help here would be great as I’m lost

Posts: 1

Participants: 1

Read full topic

@ankant wrote:

I am trying to send formData using xmlHttpRequest. In a cordova based application, I am able to succesfully establish connection and send data. But the same xhr fails to establish connection when used in ionic application.
Why is it so?
Here is my basic xhr code without any data:

var xhr = new XMLHttpRequest();
xhr.open('POST', '/fdchandler/');
xhr.onload = function() {
  if (xhr.status != 200) { 
	alert(`Error ${xhr.status}: ${xhr.statusText}`); 
  } else { // show the result
	alert(`Done, got ${xhr.response.length} bytes`);
  }
};

xhr.onerror = function(e) {
 alert(JSON.stringify(e));
};
xhr.send();

/fdchandler/ points to the server url. I have configured it through proxy in my ionic.config.json file

Posts: 1

Participants: 1

Read full topic

@bc_uk wrote:

I am trying to do 2-way binding with an ion-datetime. However, my date is stored as a string like this: “dd/mm/yyyy”, but the ion-datetime is expecting “mm/dd/yyyy”. I tried binding to a getter and setter as follows:

HTML:

<ion-datetime name="dt_dob" [(ngModel)]="user.getDOB()" (ionChange)="user.setDOB($event)" placeholder="Enter date of birth" display-format="DD MMM YYYY" pickerFormat="DD/MM/YYYY"></ion-datetime>

user class getter/setter:

public getDOB(): string {
  const dateParts: string[] = this.dob.split("/");
  const result = dateParts[1] + "/" + dateParts[0] + "/" + dateParts[2];
  return result;
}

public setDOB($event) {
  const date = $event.target.value;
  const dateParts: string[] = this.dob.split("/");
  const dob: string = dateParts[0] + "/" + dateParts[1] + "/" + dateParts[2];
  this.dob = dob;
}

However, this causes the following error:

Parser Error: Unexpected token '=' at column 17 in 
[user.getDOB()=$event] in ng:///UserPageModule/UserPage.html@32:32 ("
<ion-item>
<ion-label>Date of Birth</ion-label>
<ion-datetime name="dt_dob" [ERROR ->][(ngModel)]="user.getDOB()" (ionChange)="user.setDOB($event)" placeholder="Enter date of birth""): ng:///UserPageModule/UserPage.html@32:32

Can anyone spot what I might be doing wrong here?

Posts: 1

Participants: 1

Read full topic

@OmDIonic wrote:

Hi All
For checking internet in app I implemented below code but nothing is triggering

Plugin Installation:
ionic cordova plugin add cordova-plugin-network-information
npm install @ionic-native/network
Testing Enviornment : ios simulator iphone xs 12.1 . (cant test on real device to unavailability )
Internet connection to simulator : WIFI connection in MacBook

Code:

        this.platform.ready().then(() => {
          if (this.platform.is('ios')) {

             // watch network for a disconnection
          let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
            alert('network was disconnected :-(');
          });
          
          // stop disconnect watch
          disconnectSubscription.unsubscribe();
          
  
                // watch network for a connection
          let connectSubscription = this.network.onConnect().subscribe(() => {
            alert('network connected!');
            // We just got a connection but we need to wait briefly
             // before we determine the connection type. Might need to wait.
            // prior to doing any api requests as well.
            setTimeout(() => {
              if (this.network.type === 'wifi') {
                alert('we got a wifi connection, woohoo!');
              }
            }, 3000);
          });
          
          // stop connect watch
          connectSubscription.unsubscribe();
     
          }
    });

Can somebody tell me my mistake?.
Thanks

Posts: 1

Participants: 1

Read full topic

@Bryan1313 wrote:

Hi people!!

I have a problem, when I scroll my app the tabs move to the top, Do you know how can I fix it?

Here is my code…





{{ Usuario[0].Nombre }}




<img [src]=“image” />

{{ Usuario[0].Nombre }} {{Usuario[0].Apellido}}
{{ Usuario[0].Correo }} Perfil de usuario

Nombre

{{ Usuario[0].Nombre }}

Genero

{{Usuario[0].Genero}}

Puesto

{{ Usuario[0].Puesto }}

Telefono

{{ Usuario[0].Telefono }}

Cumpleaños

{{ Usuario[0].Cumple }}

Produccion

    <ion-tab-button (click)="switch()">
      <ion-icon name="power"></ion-icon>
      <ion-label>Switch</ion-label>
    </ion-tab-button>

    <ion-tab-button (click)="usuario()">
      <ion-icon name="person"></ion-icon>
      <ion-label>Usuario</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

Posts: 1

Participants: 1

Read full topic