@prabhashi1 wrote:

hi,

I’m working on ionic 4 app and i needed to add a horizontal slider to the page. slider is added. But my question is slides are not locking at the last slide.

here is my code

html :

    <div style="float: left; width: 100%">

        <ion-slides [options]="sliderConfig" style="width: 100%" #slides>

            <ion-slide style=" margin-left: -30%">
                <div style="float:left">
                    <!-- <ion-card style="width: 180px; height: 200px;" >
                                    <ion-card-content> -->
                    <ion-avatar style="height: 110px;width: 110px" align="center">
                        <img src="../../../assets/f1.jpg" style="width: 100%; height:100%" />

                    </ion-avatar>
                    <!-- <img src="../../../assets/food.jpg" style="width:220px; height:200px"/>   -->

                    <ion-label>
                        Promo
                    </ion-label>
                    <!-- </ion-card-content>
                                </ion-card> 
              -->
                </div>

            </ion-slide>

            <ion-slide style="margin-left: -20%">
                <div style="float:left">
                    <ion-avatar style="height: 110px;width: 110px" align="center">
                        <img src="../../../assets/food.jpg" style="width: 100%; height:100%" />

                    </ion-avatar>
                    <ion-label>
                        New
                    </ion-label>
                </div>

            </ion-slide>

            <ion-slide style="width:100%; margin-left: -20%">
                <div style="float:left">
                    <ion-avatar style="height: 110px;width: 110px" align="center">
                        <img src="../../../assets/sri.jpg" style="width:100%; height:100%" />

                    </ion-avatar>
                    <ion-label>
                        Sri Lankan
                    </ion-label>
                </div>

            </ion-slide>

            <ion-slide style="width:100%; margin-left: -20%">
                <div style="float:left">
                    <ion-avatar style="height: 110px;width: 110px" align="center">
                        <img src="../../../assets/jpnse.jpg" style="width:100%; height:100%" />

                    </ion-avatar>
                    <ion-label>
                        Japanese
                    </ion-label>
                </div>

            </ion-slide>


            <ion-slide style="width:100%; margin-left: -20%">
                <div style="float:left">
                    <ion-avatar style="height: 110px;width: 110px" align="center">
                        <img src="../../../assets/indian.jpg" style="width:100%; height:100%" />

                    </ion-avatar>
                    <ion-label>
                        Indian
                    </ion-label>
                </div>

            </ion-slide>


            <ion-slide style="width:100%; margin-left: -20%" class="last">
                <div style="float:left">
                    <ion-avatar style="height: 110px;width: 110px" align="center">
                        <img src="../../../assets/chin.jpg" style="width:100%; height:100%" />

                    </ion-avatar>
                    <ion-label>
                        Chinese
                    </ion-label>
                </div>

            </ion-slide>

        </ion-slides>


    </div>

ts:

export class FoodPage implements OnInit {

  @ViewChild(IonSlides) slides: IonSlides;

  sliderConfig = {
   //spaceBetween: 5,
   centeredSlides: true,
   slidesPerView: 1.7

  }

  

  constructor(private router: Router) {
    
    
   }

  ngOnInit() {
  // this.slides.lockSwipeToNext(true);
   
  }
}

Posts: 1

Participants: 1

Read full topic

@Dactary wrote:

Hello,

I use ionic 4 and i have a problem on android emulator.
The camera work fine but when I open the gallery, the gallery crash !

I ask permission after open gallery.

Capture d’écran 2019-05-31 à 07.45.44.png1220×1064 140 KB

When I look console, I see that :

Can someone help me please ?

Thx

Posts: 1

Participants: 1

Read full topic

@kogutu wrote:

Hello I have problem, I try add to several pages my Header Components (Ionic g component). My Header componet have a 4 files: html,scss,spec.ts and ts. When I add this component to minimum 2 pages I get this error:

Error: Type HeaderComponent is part of the declarations of 2 modules: Tab1PageModule and ProductPageModule! Please consider moving HeaderComponent to a higher module that imports Tab1PageModule and ProductPageModule. You can also create a new NgModule that exports and includes HeaderComponent then import that NgModule in Tab1PageModule and ProductPageModule.
Error: Type HeaderComponent is part of the declarations of 2 modules: Tab1PageModule and ProductPageModule! Please consider moving HeaderComponent to a higher module that imports Tab1PageModule and ProductPageModule. You can also create a new NgModule that exports and includes HeaderComponent then import that NgModule in Tab1PageModule and ProductPageModule.

Its my component look like this:

import { HeaderComponent } from './../../partials/header/header.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { ProductPage } from './product.page';

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  
  entryComponents:[HeaderComponent],
  declarations: [ProductPage,HeaderComponent]
})
export class ProductPageModule {}

I try several ways too add this component but I still stay on the same point. On one page works well.

I will be very greatful for help

Posts: 1

Participants: 1

Read full topic

@keloa wrote:

Guys I am making an app which has tracking ability , anyway I am using this plugin :

I used this code to get the location :

const config: BackgroundGeolocationConfig = {
  desiredAccuracy: 50,
  stationaryRadius: 1,
  distanceFilter: 1,
  debug: true, //  enable this hear sounds for background-geolocation life-cycle.
  stopOnTerminate: false, // enable this to clear background location settings when the app terminates
};

this.backgroundGeolocation.configure(config)
  .then((location: BackgroundGeolocationResponse) => {
    console.log("Here you should see the location");
    console.log(location);
    console.log(location.longitude);
    console.log("Here you should see the End location");
    
  });

// start recording location
this.backgroundGeolocation.start();

so the problem is that when I tried to run it on an android device I got this output

[INFO:CONSOLE(762)] "Here you should see the location"
[INFO:CONSOLE(763)] "OK"
[INFO:CONSOLE(764)] "undefined"
[INFO:CONSOLE(765)] "Here you should see the End location"

how can I get the location ?! , from what I understood location.longitude should show the longitude but it is not , and location is a BackgroundGeolocationResponse but it is not it is showing “ok” , please guys help me I am stuck for two days now on the same issue.

Posts: 1

Participants: 1

Read full topic

@Unkn0wn0x wrote:

Hi Community,

I’ve got the latest Newsletter from Google I/O and specially checked out their new Feature called “Trusted Web Activities”.

It seems to be a Feature which allows a native App to create a fullscreen WebApp with some improvements over a regular WebView. So, wouldn’t it be a good way to go for Ionic (or a Plugin)?

Additionally there seems to be a easy way to communicate between the WebView and the native App itself.

Please see more Informations here:

• https://www.youtube.com/watch?v=6lHBw3F4cWs
• https://developers.google.com/web/updates/2019/02/using-twa

This Topic is created for discussing / brainstorming, maybe a Developer will create a Plugin / Feature based on the Informations in here, who knows .

Cheers
Unkn0wn0x

Posts: 1

Participants: 1

Read full topic

@AdamGelineau wrote:

Hi guys,

Today I’m trying to add a modal page into my app. I open it when clicking on a button.
But the problem is it’s showing as soon as I reach my page, and I can’t dismiss it…

To implement it, I followed this guide: https://medium.com/@david.dalbusco/how-to-declare-and-use-modals-in-ionic-v4-4d3f42ac30a3

async openVideoConseil(video) {
  const modal = await this.modal.create({
    component: VideoModalPage,
    componentProps: {
      'video': video,
    }
  });
  return await modal.present();
}

I called a console.log('open modal'); here but it’s never shown, even if the modal gets opened.

The only time I call my modal is in my template code, when clicking on a button.

Thanks !

Posts: 1

Participants: 1

Read full topic

@CathyLi wrote:

how to use a WSDL SOAP with ionic 3?, I look on the net, and the tutorial but I have not yet answered until now,

Thanks,

Posts: 1

Participants: 1

Read full topic

@ioclaudio wrote:

Hi,
I have to post some data from an Ionic form to an existent web service.
The form contains some mandatory text fields and an optional image field.
Now I’m trying to send only the mandatory fields.

I have this test done with WebStorm that works well

Snippet A:

#################################################################
# Route:            - /warning
# Method:           - POST
# Description:      - Creates new item without the attachment
#################################################################
POST http://{{host}}:{{port}}/warning
Content-Type: multipart/form-data; boundary=WebAppBoundary
auth: {{auth_token}}

--WebAppBoundary
Content-Disposition: form-data; name="data"

{
  "deviceId": 77,
  "warningTypeId": 1,
  "description": "test"
}
--WebAppBoundary--

Now I have to implement the Ionic code to submit the form data.
Googling a bit I’ve seen that with the HttpClient library I should use an object called FormData.

So I’ve done this code:

Snippet B:

sendReport(values) {
    ....

    const tempToken = this.getToken();
    const headers = {
      'enctype': 'multipart/form-data;',
      'Content-Type': 'application/json',
      'Accept': 'plain/text',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT',
      'Access-Control-Allow-Headers': 'Authorization, Origin, Content-Type, X-CSRF-Token',
      'auth': tempToken
    };

    const formData = new FormData();
    const dataJson = {
      'deviceId': values.device_id,
      'description': values.msg_text,
      'warningTypeId': values.failures[0]
    };
    console.log('dataJson:', dataJson);
    formData.append('data', JSON.stringify(dataJson));
    console.log('formData: ', formData.getAll('data'));

    return this.httpClient.post(commandUrl,
      formData,
      {headers: headers, responseType: responseType});
}

However I get the error: “Bad request”, so I think that A) and B) are not equivalent.
Since I think this is a common requirement, how should I use FormData?
And is it the right choice? I have to send both simple fields and a file to a pre-existent and working web service.

Thank you very much

Claudio

Posts: 1

Participants: 1

Read full topic

@abdosaeed wrote:

how can, i list all files in directory and subdirectories, i write some code but not work for me

getFiles(parent,dir,data){
this.file.listDir(parent,dir).then((files)=>{
files.forEach(f1 => {
if(f1.isDirectory == true && f1.name !=’.’ && f1.name !=’…’){
this.totalDirs++;
this.getFiles(f1.fullPath,’’,data);
}else{
this.totalFiles++;
data.push({
name:f1.nativeURL,
});
}
});
}).catch((err) => {
console.log(JSON.stringify(err));
});
}

Posts: 1

Participants: 1

Read full topic

@amirZulkifli89 wrote:

Hi,
A newbie here. Just having this problem. I try to publish my app but it seems that every time I run a simulation either using android studio or xcode the app will have blank screen after splash screen. However if I run using “ionic serve” or “ionic serve --lab” and “ionic cordova run android” on my device this problem did not happen.

I try to find solution but none solve this problem. Need help urgently.

Posts: 1

Participants: 1

Read full topic

@karapazar wrote:

Hello everyone. I get an error where use “cordova-plugin-x-socialsharing” plugin. I want to share local file. File is exist. I check it.

alert(dir + r.resim)
this.socialSharing.share("mesaj", "konu", dir + r.resim)
        .then((a) =>
        {
            alert("basari: " + a);
        })
        .catch((e) =>
        {
            alert("Paylaşımda hata: " + e);
        });

1.jpeg899×1599 56 KB

2.jpeg899×1599 61.6 KB

3.jpeg899×1599 81.3 KB

Posts: 1

Participants: 1

Read full topic

@LacOniC wrote:

Normally i use @ionic/lab": “^1.0.24” Latest before 2.

When i try npm i @ionic/lab --save it’s not updated to 2.0.0. It’s still 1.0.24.

When i manually changed it to 2.0.0 and run ionic s -l i get only a blank page.

Can anyone use it successfully?

Posts: 1

Participants: 1

Read full topic

@nharrer wrote:

The old ionc3 LoadingController returned a loader object which had a method setContent() which could be used to update the loading message as things progressed:

Ionic 3:

this.loader = this.loadingCtrl.create({
    content: 'Please wait...'
});

...

this.loader.setContent('bla...');

How can this be done in ionic4+? There does not seem to be a setContent() method of the returned object.

Thanks.

Posts: 1

Participants: 1

Read full topic

@Abhishek91 wrote:

I am unable to use ionic secure storage…its give some error …i have mention below

core.js:15724 ERROR Error: Uncaught (in promise): TypeError: Object(…) is not a function
TypeError: Object(…) is not a function
at Module…/node_modules/@ionic-native/secure-storage/index.js (index.js:77)
at webpack_require (bootstrap:83)
at Module…/src/app/home/home.page.ts (home-home-module.js:318)
at webpack_require (bootstrap:83)
at Module…/src/app/home/home.module.ts (home-home-module.js:250)
at webpack_require (bootstrap:83)
at $_lazy_route_resource lazy namespace object:18
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Object.onInvoke (core.js:17299)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
at resolvePromise (zone.js:831)
at resolvePromise (zone.js:788)
at zone.js:892
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17290)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)

core.js:15724 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[HomePage -> SecureStorage]:
StaticInjectorError(Platform: core)[HomePage -> SecureStorage]:
NullInjectorError: No provider for SecureStorage!
Error: StaticInjectorError(AppModule)[HomePage -> SecureStorage]:
StaticInjectorError(Platform: core)[HomePage -> SecureStorage]:
NullInjectorError: No provider for SecureStorage!
at NullInjector.push…/node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8896)
at resolveToken (core.js:9141)
at tryResolveToken (core.js:9085)
at StaticInjector.push…/node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8982)
at resolveToken (core.js:9141)
at tryResolveToken (core.js:9085)
at StaticInjector.push…/node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8982)
at resolveNgModuleDep (core.js:21218)
at NgModuleRef_.push…/node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:21907)
at resolveNgModuleDep (core.js:21218)
at resolvePromise (zone.js:831)
at resolvePromise (zone.js:788)
at zone.js:892
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17290)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)

compiler.js:2430 Uncaught Error: Can’t resolve all parameters for SecureStorageObject: (?).
at syntaxError (compiler.js:2430)
at CompileMetadataResolver.push…/node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:18984)
at CompileMetadataResolver.push…/node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:18877)
at CompileMetadataResolver.push…/node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getInjectableTypeMetadata (compiler.js:19099)
at CompileMetadataResolver.push…/node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getProviderMetadata (compiler.js:19108)
at compiler.js:19046
at Array.forEach ()
at CompileMetadataResolver.push…/node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getProvidersMetadata (compiler.js:19006)
at CompileMetadataResolver.push…/node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18725)
at JitCompiler.push…/node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:26029)

Posts: 1

Participants: 1

Read full topic

@chastuser wrote:

Hi,
when I try to run my app on a real device or an emulator I got these errors:

Failed to load resource: net::ERR_CONNECTION_REFUSED ion-dev.js?v=3.2.0:102

WebSocket connection to ‘ws://localhost:53703/’ failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

The app works but not the livereload feature.

Moreover I have no problems with:

ionic serve

Some informations about my system:

$ ionic info
[WARN] The pro_id field in ./ionic.config.json has been deprecated.

   Ionic Pro has been renamed to Ionic Appflow! We've copied the value in pro_id to id, but you may want to unset
   the deprecated property: ionic config unset pro_id

Ionic:

Ionic CLI : 5.0.0 (/home/user/.nvm/versions/node/v10.15.3/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 15 other plugins)

Utility:

cordova-res : not installed
native-run : 0.1.2

System:

Android SDK Tools : 26.1.1 (/home/user/Android/Sdk/)
NodeJS : v10.15.3 (/home/user/.nvm/versions/node/v10.15.3/bin/node)
npm : 6.4.1
OS : Linux 4.18

Posts: 1

Participants: 1

Read full topic

@Abhishek91 wrote:

How to use pub sub in ionic 3 …

Posts: 1

Participants: 1

Read full topic

@Chevalde3 wrote:

Hi the forum. Help me for a little trouble please.

this.deeplinks.routeWithNavController(this.nav, {
‘/panier’: PanierPage,
‘/boutique/:idboutique’: ProduitboutiquePage
}).subscribe(match => {
console.log(‘Successfully matched route’, match);
}, nomatch => {
console.error(‘Got a deeplink that didn’t match’, nomatch);
});

I generated a link to open “PanierPage” and it worked. here is the link

href=‘achatacredit://panier’

I generated a second link to open the “ProduitboutiquePage”. With this link I integrated a parameter to which I assigned a value. Here is the link

href=‘achatacredit://boutique/2’

when I click on the link Boutique to access the store page it does not work.

Help me please

Posts: 1

Participants: 1

Read full topic

@mlynch wrote:

(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)

Posts: 1

Participants: 1

Read full topic

@MikeBauer wrote:

The ion-segment-button background style does not appear to function correctly on a web browser.
I would like the background of the ion-segment-button to always be ‘white’.

In global.scss I tried modifying

ion-segment-button {
–background: #ffffff;
–background-activated: #ffffff;
–background-checked: #ffffff;
–background-hover: #ffffff;
}

And this did not have any effect on the background color. Also after selecting buttons multiple times the background color shade seems to be off as well. See attachment.

Screen Shot 05-31-19 at 10.51 AM.PNG1502×99 4.68 KB

Posts: 1

Participants: 1

Read full topic

@SanduCuragau wrote:

I have this iso string

horaFinal: “2019-05-27T17:15:17.581Z”

and now I suddenly need to change programatically the date from 2019-05-27 to 2019-06-02, how do I do it?
Do I need to transform the iso string to a date object and then do setDate?
Can I change it somehow right away in the string?

Posts: 1

Participants: 1

Read full topic