@Fearcoder wrote:

I am migrating my ionic 3 app to ionic 4. In Ionic 3 I had a sub menu in a category. This is my old code:

Ionic 3 submenu

Typescript

menuItemForce(): void {
    this.showForce = !this.showForce;
  } 

This function will shown the sub items when clicked on a category.

This is the code to show the sub menu:

<ion-list class="sidenav">
            <ion-item (click)="menuItemForce()">
                <ion-icon name="walk" color="primary"></ion-icon>
                Force
            </ion-item>
            <ion-item-group submenu [class.visible]="showForce">
                <ion-item submenu-item menuClose (click)="openWorkPage()">Test1</ion-item>
                <ion-item submenu-item menuClose (click)="openCirckelPage()">Test2</ion-item>
                <ion-item submenu-item menuClose (click)="openDistancePage()">Test3</ion-item>
                <ion-item submenu-item menuClose (click)="openSpeedPage()">Test4</ion-item>
                <ion-item submenu-item menuClose (click)="openKinEnergyPage()">Test5</ion-item>
                <ion-item submenu-item menuClose (click)="openTimePage()">Test6</ion-item>
                <ion-item submenu-item menuClose (click)="openGrafityEnergyPage()">Test7</ion-item>
                <ion-item submenu-item menuClose (click)="openGrafityForcePage()">Test8</ion-item>
            </ion-item-group>
        </ion-list>

When I click the other pages will shown in the menu. This was working good.

This is my code in Ionic 4

Ionic 4 menu

<ion-app>
  <ion-menu contentId="content" side="start">
    <ion-header>
      <ion-toolbar>
        <ion-title>Categorie</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
          <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
            <ion-icon slot="start" [name]="p.icon"></ion-icon>
            <ion-label>
              {{p.title}}
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="content" main></ion-router-outlet>
</ion-app>

Its working good but I don’t know how I can add the sub menu in ionic 4.

How can I have the same functions for the sub menu in Ionic 4?

Posts: 1

Participants: 1

Read full topic

@avex wrote:

I currently, attempt to migrate a project from v3 to v4. I found that it is hard to re-style Ionic4
components. In some cases, I have to give up Ionic4 and use Material or Primeng instead.
Styling is critical important for web development. For a cross platform framework with different screen sizes support (PWA, mobile devices…), FLEXIBLE should be the most important thing a framework should consider, however, Ionic4 has changed to use web component. The advantage is that it can maintain it’s original style, but It is also the disadvantage, because it’s hard to re-styling.

I am curious that do you have the same problems? Or it’s only my problem? Using web component is just for fancy reason? or for practical? If I give up using Ionic4 components, using others instead what is the value of Ionic?

Posts: 2

Participants: 2

Read full topic

@kadi60 wrote:

Hi , everybady Ihope everything is Ok
I created an ionic application a,d after generating .apk , I want to test it from device .So I connected both Pc and Telefone through wifi and I autorized apache access remotely , I changed the httpd.conf in this way

Options FollowSymLinks AllowOverride All # Require all denied Allow from All Allow from 192.168.1

and httpd-vhost.conf like

Virtual Hosts

<VirtualHost *:80>
ServerName localhost
ServerAlias localhost
DocumentRoot “{INSTALL_DIR}/www" <Directory "{INSTALL_DIR}/www/”>
Options +Indexes +Includes +FollowSymLinks +MultiViews
AllowOverride All
Require all granted
Allow from All
Allow from 162.168.1
Require ip 192.168.1

also I changed the file Alias/phpmyadmin.conf in this way

<Directory “c:/wamp64/apps/phpmyadmin4.7.4/”>
Options +Indexes +FollowSymLinks +MultiViews

AllowOverride all

Require all granted

</ifDefine>
<ifDefine !APACHE24>
	Order Deny,Allow
Deny from all
Allow from localhost ::1 127.0.0.1
Allow from 192.168.1
</ifDefine>

To import big file you can increase values

php_admin_value upload_max_filesize 128M
php_admin_value post_max_size 128M
php_admin_value max_execution_time 360
php_admin_value max_input_time 360

all those change in orger to autorize remote access to apache.

when I try to access the application throw the chrome navigator it works fine, but with .apk file not thing is working , I can’t do login to my application and no error message is given.

can you please help , and what is possible to do in order to show logs files

Posts: 1

Participants: 1

Read full topic

@desarrolloSan wrote:

I am working on a project that is done in ionic 3, and I am passing it to ionic 4, but it is giving me problems with http.get calls, it does not return what I expected.

In ionic 3 it worked perfectly.

Posts: 1

Participants: 1

Read full topic

@Mike1707 wrote:

Hey Guys!

I noticed a rendering issue after upgrading to Ionic 4 and provided a demo project on Github as well as a video to show my issue.

Video: https://vimeo.com/user95328475/review/318454429/98eaf28b51

The following can be noticed in the video:

After changing the Tab, I fetch some posts over http. After that, I iterate with *ngFor over the posts and for a few milliseconds my div background cards are visible but empty. Then the ion-grid will be rendered and the content of the cards will be displayed. Actually, for me this is kinda ugly and I don’t know how to solve this. With ionic 3 and the same code everything was rendered at the same time and there weren’t any “empty bubbles” visible.

Github Project: https://github.com/Mike1707/ionic4-rendering-issue

Maybe you guys have any advises for me.

Thanks,
Mike

Related Code:

<ion-content>
  <div padding>
    <div padding-bottom *ngFor="let post of posts; trackBy: trackByPostId">
      <div padding class="background-card">
        <ion-grid>
          <ion-row>
            <ion-col>
              <h4>{{post.title}}</h4>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              {{post.body}}
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
    </div>
  </div>
</ion-content>

.background-card {
  background: white;
  position: relative;
  border-radius: 15px;
  -webkit-box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.4);
}

async ngOnInit(): Promise<void> {
    this.posts = await this.http.get<Post[]>('https://jsonplaceholder.typicode.com/posts').toPromise();
}

trackByPostId(index: number, post: Post) {
    return post.id;
}

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

Posts: 1

Participants: 1

Read full topic

@inartech wrote:

Hello guys,

I installed and configured background geolocation plugin (
https://github.com/mauron85/cordova-plugin-background-geolocation ) with no problems.

let config: BackgroundGeolocationConfig = {
    desiredAccuracy: 10,
    stationaryRadius: 1,
    distanceFilter: 1, 
    debug: true,
    interval: 2000,
    stopOnTerminate: false,
    url: 'my-link',
    postTemplate: {
        lat: '@latitude',
        lng: '@longitude'
};
		
this.backgroundGeolocation.configure(config).then((location: BackgroundGeolocationResponse)=>{
    this.globals.lat = location.latitude;
    this.globals.lng = location.longitude;
    this.storage.set('lat',location.latitude);
    this.storage.set('lng',location.longitude);
}, (error) => {
    alert(error);
});

this.backgroundGeolocation.start();

The coords are saved to server every time the location changes, even if my app is completely closed. The problem is that when there is not internet connection i want to save locations to a local sqlite table and when internet connection returns send this table to server, and I dont know the function-listener of plugin where i have to put my “write to sqlite table” code. The function

BackgroundGeolocation.on('location', function(location) {...});

causes build error with the message that expected 1 argument. Could anyone help me???

Posts: 1

Participants: 1

Read full topic

@josele2015 wrote:

I would like to know, if there is a tool that allows to visualize documents that are inside a sd memory, I am trying with the plugin file opener but this plugin has the disadvantage that it does not allow to open documents in a sd.

Posts: 1

Participants: 1

Read full topic

@ariff23 wrote:

can help me how to input admin and user in same time?

image.png753×433 14.6 KB

Posts: 1

Participants: 1

Read full topic

@P0DC45T wrote:

Hey there,

I wanted to programm an Alarm Clock with Ionic and Cordova, but i have a few probelems with this task.

First of all im completly new to Ionic and Cordova. So the first question I have is, should I use Ionic 3 or 4?

Are there some tutorials I can use? Is it even possible to make a working Alarm Clock? Or only in JavaScript?

Hope you can help me with this rare informations.

Posts: 1

Participants: 1

Read full topic

@haseebnaqvi wrote:

I’m having this error I don’t know why. Please anyone help me through this.

Posts: 1

Participants: 1

Read full topic

@Tainteezy wrote:

Hi,

I am trying to implement this linter https://www.npmjs.com/package/tslint-config-airbnb with ionic 4…

It was really simple and straightforward with Ionic 3 however with Ionic 4 it just does not work.

Basically I have created a new blank ionic app.

Ran this command “npm install tslint-config-airbnb --save-dev”

and added ’ “extends”: “tslint-config-airbnb” ’ to tslint.json in the beginning of the json file.

If I run “ng lint” from terminal I will get

Cannot find module ‘typescript’
Error: Cannot find module ‘typescript’
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:609:15)
at Function.Module._load (internal/modules/cjs/loader.js:535:25)
at Module.require (internal/modules/cjs/loader.js:663:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/Users/greatestuser/Documents/Learning/Ionic/node_modules/tslint-consistent-codestyle/rules/objectShorthandPropertiesFirstRule.js:4:10)
at Module._compile (internal/modules/cjs/loader.js:734:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:745:10)
at Module.load (internal/modules/cjs/loader.js:626:32)
at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
at Function.Module._load (internal/modules/cjs/loader.js:558:3)

Any idea where could the issue be or how could I debug it?

Thank You for any suggestions, have a great day.

Posts: 1

Participants: 1

Read full topic

@akkari97 wrote:

hello , i created a costume pipe with this code
import { Pipe, PipeTransform } from ‘@angular/core’;

/**

• Generated class for the CapitalizeFirstPipe pipe.
• See https://angular.io/api/core/Pipe for more info on Angular Pipes.
  /
  @Pipe({
  name: ‘capitalizeFirst’,
  })
  export class CapitalizeFirstPipe implements PipeTransform {
  /*
  • Takes a value and makes it lowercase.
    */
    transform(value: string, …args) {
    return value.toLowerCase();
    }
    }
    and i called this pipe with this code
    {{ bouquet.nom | capitalizeFirst }}
    but no thing changed , can you tell me what’s rong ?

Posts: 1

Participants: 1

Read full topic

@bbarascou wrote:

Hi everyone,
i would like to know how can i highlight the menu button of the active page.

This is my app.component.html

 <ion-menu menuId='scope'>
      <ion-header>
        <ion-toolbar>
          <img src="assets/images/logo_groupe.png">
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false">
            <ion-item [routerDirection]="'root'" [routerLink]="['/scope-pays','historique']">
              <ion-icon slot="start" name="paper"></ion-icon>
              <ion-label>Historique</ion-label>
            </ion-item>
            <ion-item [routerDirection]="'root'" routerLink="/scope-sav-main">
              <ion-icon slot="start" name="build"></ion-icon>
              <ion-label>SAV</ion-label>
            </ion-item>
            <ion-item [routerDirection]="'root'" [routerLink]="['/scope-pays','gestion-parc']">
              <ion-icon slot="start" name="globe"></ion-icon>
              <ion-label>Gestion du parc</ion-label>
            </ion-item>
            <ion-item [routerDirection]="'root'" routerLink="/app-list">
              <ion-icon slot="start" name="log-out"></ion-icon>
              <ion-label>Quitter telscope</ion-label>
            </ion-item>
            <ion-item [routerDirection]="'root'" routerLink="/login">
              <ion-icon slot="start" name="power"></ion-icon>
              <ion-label>Se déconnecter</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>

Thank you

Posts: 1

Participants: 1

Read full topic

@bhalalapj wrote:

Hello,
I have a severe problem with my ionic v3 app. When i run command ionic cordova build ios. It always give me build in objective c .

How can i get build in swift (any version ) ?

Posts: 1

Participants: 1

Read full topic

@obinnae wrote:

My app uses Stripe elements (not the native plugin) to display a credit card form. It works fine in test mode, but when I switch to live mode, I get the error

Live Stripe.js integrations must use HTTPS

and won’t render the form. How do I get live mode to work? I’m about to launch the app to the public, but can’t until this is resolved.

Thanks.

Posts: 1

Participants: 1

Read full topic

@DavidvZ wrote:

Is it possible to put componentRefs created via a factory into a virtual scroll list? Or some similar method.

 this.searchResults.forEach(item => {
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(item.component);
      const componentRef = viewContainerRef.createComponent(componentFactory);
      (<ListInterface>componentRef.instance).data = item.data;
    });

They just append to the element with the directive on currently.

Posts: 1

Participants: 1

Read full topic

@dev-gilbert wrote:

Even in the Ionic docs I see examples where they initialize data in the constructor, like so:

export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private authService: AuthenticationService,
    private router: Router
  ) {
    this.initializeApp();
  }

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

      this.authService.authenticationState.subscribe(state => {
        console.log("Auth state: " + state);
        if (state) {
          this.router.navigate(["home"]);
        } else {
          this.router.navigate(["login"]);
        }
      });
    });
  }
}

It is my understanding that it’s a good practice to initialize data in the ngOnInit lifecycle method instead, but still I see time and time again that in Ionic apps people initialize data in the constructor.

Why in the example above the author would choose to use the authService in the constructor? I think it would be better in the ngOnInit method no?

Posts: 1

Participants: 1

Read full topic

@ffalcinelli wrote:

Hi all,

I’m using ionic 4 and I’d like to build a reusable form component. Probably it’s easy but my lack of knowledge is not helping me find the best way to achieve it.

Say I have a password input, with a toggle icon to show/hide the password. This could appear in at least 3 places: login, register and reset pages.

So one of these forms could be something like:

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
    <ion-item>
        <ion-label position="floating">Email</ion-label>
        <ion-input name="email" type="email" formControlName="email"></ion-input>
    </ion-item>
    <app-password-item [form]="loginForm" formControlName="password"></app-password-item>
    <ion-button type="submit" [disabled]="loginForm.invalid" expand="block">Sign in!
    </ion-button>
</form>

...
    ngOnInit() {
        this.loginForm = this.formBuilder.group({
            email: ['', [Validators.required, Validators.email]],
            password: ['', [Validators.required]]
        });
    }
...

And my <app-password-item> would be

<ion-item>
    <ion-label position="floating">Password</ion-label>
    <ion-input name="password" [type]="passwordType" clearOnEdit="false"></ion-input>
    <ion-icon [name]="passwordIcon" class="password-icon" (click)='hideShowPassword()' slot="end"></ion-icon>
</ion-item>

And the corresponding typescript file:

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

@Component({
    selector: 'app-password-item',
    templateUrl: './password-item.component.html',
    styleUrls: ['./password-item.component.scss']
})
export class PasswordItemComponent implements OnInit {
    @Input() form: FormGroup;
    passwordType = 'password';
    passwordIcon = 'eye-off';

    constructor() {}

    ngOnInit() {}

    hideShowPassword() {
        this.passwordType = this.passwordType === 'text' ? 'password' : 'text';
        this.passwordIcon = this.passwordIcon === 'eye' ? 'eye-off' : 'eye';
    }
}

I’ve not put any css and other cosmetics to be short.

Now, I read about ControlValueAccessor, but I don’t understand if it’s the right choice, since I don’t want to create a custom control, but just wrap an existing one so that I can reuse it without copy/paste abuse.

I’m sorry if this has been asked before, but I didn’t find any similar post… Any suggestion is much appreciated!

Thank you all, ciao,
Fabio

Posts: 1

Participants: 1

Read full topic

@Rotor7ven wrote:

Hello everyone, I’m trying to stylize my popover with the cssClass property as stated in the docs but it does not seem to be working. By default the width of the popover content is 170px but I need it to over the width of the device. How can i achieve this? I looked at other post but they seem to be in ionic 3 and not working.

Home.ts:

async openPopOver(ev: Event) {
    const popover = await this.popoverCtrl.create({
      component: PopOverPage,
      event: ev,
      cssClass: 'pop-over-style'
    });
    popover.present();
  }

home.css

.pop-over-style {
    .popover-content {
        //width: 80% !important; - this wont work or the bottom one.
        --width: 300px !important;
    }
}

Posts: 6

Participants: 2

Read full topic

@derman10 wrote:

I stuck for days trying to make it work “open-native-settings” on my ionic 3 project,.

So, following the documentation,

add this on app.modules.ts:

import { OpenNativeSettings } from '@ionic-native/open-native-settings/ngx';

and add OpenNativeSettings in providers list.

Then en my .ts file:

import { OpenNativeSettings } from '@ionic-native/open-native-settings/ngx';

Adding on constructor:

constructor(private openNativeSettings: OpenNativeSettings) { }

but when trying call open() method I get:
(…) is not a function. (???)

this plugin work fine on Ionic 3??

Why I see /ngx to the end of import line???

I need try this on Ionic 3, not Ionic 4.

any suggestions??

Thanks.

Posts: 6

Participants: 2

Read full topic