@Manel00 wrote:

Hello!

I have too many problems (I’m newbie at this subject) showing properties of a class on HTML, always give me the error “Cannot read property of XXXXXX undefined” and its getting me off… let me show you my code:

on html:

{{ vehicle.platenumber }}
{{ vehicle.brand }}
{{ vehicle.model }}

on ts:

export class HomePage implements OnInit {

  private newVehicleParams: string;
  public vehicle: any;

  ngOnInit(): void {
    this.newVehicleParams = this.params.get('newVehicleParams');
  }

  motolog$: Observable<any>;
  vehi$: Observable<Vehicle>;

  constructor(
    public navCtrl: NavController,
    private motolog: MotoLogService,
    private params: NavParams,) {
      this.vehi$ = this.motolog.getVehicle(this.newVehicleParams);
})
}

on motologservice:

    getVehicle(vehicleKey: string) {
        return this.db.list(`vehicles/${vehicleKey}`);
    }

I’m creating on the page from before, a vehicle on the DB of Firebase (it’s succesful), but what I don’t know how to do, is to get the vehicle key, and then use in the next page, at html: the platenumber, brand and model.

Thank you so much

Posts: 1

Participants: 1

Read full topic

@jarv81178 wrote:

Please help, I am getting the error: Can’t bind to ‘ngmodel’ since it isn’t a known property of ‘ion-input’

I added FormsModule and ReactiveFormsModule to app.module.ts and to the actual module file… I am still getting the error?!

<ion-item>
        <ion-label>Name</ion-label>
        <ion-input [(ngmodel)]="item.name" name="name" placeholder="Name"></ion-input>
      </ion-item>

Posts: 1

Participants: 1

Read full topic

@jamesbrannigan89 wrote:

Hi I have a question about ionic radio buttons, when I select a radio button that I have given a value in a page called settings.html, it should change the font size of some text in another page called news.html. Im new to ionic so if anyone has any suggestions id appreciate it.

Originally I tried using ngmodel and creating variables to store the font size and the use *ngfor to change the text size when a radio button value was selected but I couldn’t figure this out. I also tried using css by trying to assign css class tags to the radio button values but that didnt seem to work either.

This is the settings.html radio button

<ion-item>
    <ion-label >
     1
    </ion-label>
    <ion-radio  value="one" ></ion-radio>
  </ion-item>

 <a href="{{ n.url }}"><h2> <font size ="{{variableFont}}"> {{ n.title }} </font> </h2> </a>

Posts: 1

Participants: 1

Read full topic

@iabdoo wrote:

Hello,

I hope all of you are fine and doing well,

I need a Pipe that sort Array1 by id using OrderArray.

HTML = " <ng-container *ngFor="let item of items | sortBy : ‘id’>

Array1:
[{“id”: 1,“title”: “Post-1”,“thumb”: “post1.png”},
{“id”: 2,“title”: “Post-2”,“thumb”: “post2.png”},
{“id”: 3,“title”: “Post-3”,“thumb”: “post3.png”},
{“id”: 4,“title”: “Post-4”,“thumb”: “post4.png”},
{“id”: 5,“title”: “Post-5”,“thumb”: “post5.png”}]

OrderArray:
[3, 5, 2, 4, 1]

I need the result to be:
Result:
[{“id”: 3,“title”: “Post-3”,“thumb”: “post3.png”},
{“id”: 5,“title”: “Post-5”,“thumb”: “post5.png”},
{“id”: 2,“title”: “Post-2”,“thumb”: “post2.png”},
{“id”: 4,“title”: “Post-4”,“thumb”: “post4.png”},
{“id”: 1,“title”: “Post-1”,“thumb”: “post1.png”},]

Hope I’ll find someone to help, I tried a lot without success.

Thanks

Posts: 1

Participants: 1

Read full topic

@m7ammad7assan wrote:

Hi Friends

I have Created a Blank and tabs app using ionic 4, i tried to import Content using the following statement:
Import { Content } from ‘@ionic/angular’

but it lead to error with "has no exported member ‘Content’

So how to use it !

Posts: 1

Participants: 1

Read full topic

@henrylcombrinck wrote:

Greetings,

I’m new to Ionic and looking at using it with Vue. Been lurking and waiting for the 4.0 Final version which to my understanding (correct me if I’m wrong) will include support for --type=vue (instead of angular). I have messed around with the various work-arounds etc but would prefer to use Ionic in a standard way with Vue.

As of v4.0.0-rc.0:

cli packages: (/usr/local/lib/node_modules)

   @ionic/cli-utils  : 2.0.0-rc.0
   ionic (Ionic CLI) : 4.0.0-rc.0

System:

   NodeJS : v10.15.0
   npm    : 6.4.1
   OS     : macOS High Sierra

…there is still no direct Vue support (only angular).

Will direct Vue support be included for 4.0 Final?

Final question: I had 4.6.0 installed then specifically installed 4.0.0-rc.0 to see if --type=vue was available - how is 4.6.0 different to 4.0.0-rc.0?

Thanks

Posts: 1

Participants: 1

Read full topic

@CTucker1327 wrote:

I’m currently moving to Ionic from a React background as the support for React&Cordova is extremely limited. I’m struggling to get a grip on Angular, but I’m doing it slowly. I have created our custom menu right now that’s all rendered inside of a single “page”. Here’s an example of how it looks with animations.

c4c84a301cb839760e1f4dd39d6f3e87.gif440x752

The <ion-content> is given a z-index of 1 while the menu is fixed in the background with a z-index of 0. Unfortunately, since the menu is part of what Ionic currently considers a “page” when the user navigates it slides in a whole new page (with a separate menu).

Instead, I’d like to just change the page that’s being rendered in the <ion-content> component. Our application will not be using any built-in ionic components and we’re only really here because of ionic-native. If I could use that in a regular cordova project I would definitely be using react.

Based on the animation above, when a use clicks on a new page, I’d like the content in the smaller page window to change to the new page as it animates back into place.

How can I do this with Ionic

Posts: 1

Participants: 1

Read full topic

@augustinetriggia wrote:

I’m having a problem, one that I’ve not been able to find the answer for as of yet. I create a new instance of the ProfileData class and set the profileName variable via setName(). I can see via the console logs in setName() and ngAfterViewInit() that profileName is definitely set during setName(), but has already become " " again by ngAfterViewInit(). Is there a reason why this would be happening?

AccountPage Class

  export class AccountsPage {

  public profileList = new Array<ProfileDataComponent>();

  constructor(public navCtrl: NavController,
          public navParams: NavParams,
          private alertCtrl: AlertController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AccountsPage');
  }

  addProfile()
  {
    let alert = this.alertCtrl.create({
    title: 'Add Profile',
    inputs: [
      {
        name: 'name',
        placeholder: 'Profile Name'
      },
    ],
  buttons: [
  {
    text: 'Cancel',
    role: 'cancel',
    handler: data => {
      console.log('Cancel clicked');
    }
  },
  {
    text: 'Add',
    handler: data => {
      //Declare New Profile
      var newProfile = new ProfileDataComponent();
      newProfile.setName(data.name);

      //Create new list
      var newArray: ProfileDataComponent[] = new Array(this.profileList.length + 1);

      //Copy old list to new one
      for (var i = 0; i < this.profileList.length; i++)
      {
        newArray[i] = this.profileList[i];
      }
        newArray[newArray.length - 1] = newProfile;
        this.profileList = newArray;
    }
  }
]
  });
 alert.present();
  }
}

ProfileData Component Class

export class ProfileDataComponent {

  @ViewChild('profileName') nameElement;

  profileName: string = "";

  constructor()
  {

  }

  ngAfterViewInit()
  {
    this.nameElement.textContent = this.profileName;
    console.log('Set Name: ' + this.profileName);
  }

  setName(newName: string)
  {
    this.profileName = newName;
    console.log('Setting Name: ' + this.profileName);
  }
}

Posts: 1

Participants: 1

Read full topic

@m7ammad7assan wrote:

I am trying to upgrade ionic 3 project to ionic 4 and there is reorderArray but it cannot be imported by ionic 4 libs so what is the fix for this ?

thanks .

Posts: 1

Participants: 1

Read full topic

@bowenliang123 wrote:

When I am trying to use Ionic Storage with IndexedDB on Desktop Chrome, it always fails.

app.module.ts

@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
        BrowserModule,
        IonicModule.forRoot({
            mode: 'ios'
        }),
        AppRoutingModule,

        // storage
        IonicStorageModule.forRoot({
            name: 'mydb',
            driverOrder: ['indexeddb']
        }),

Operations:

import {Storage} from '@ionic/storage';
constructor(private storage: Storage){}

...

this.storage.set('name', 'someone').then(async () => {
            console.log(await this.storage.get('name'));
        });

Got this error and failed

image.png1676x272 79.1 KB

Anyone could help? thanks!

Posts: 1

Participants: 1

Read full topic

@pdj wrote:

Hello
I’m making note app which data is saved in localStorage with json type.

the problem is that imageData.

i’m saving imagedata like below.
the problem is that it seems that imageData with base64 is too large to save in localStorage.

스크린샷 2018-12-31 12.47.22.png1148x44 13.1 KB

when I save it to localStorage, it came with error saying
RROR DOMException: Failed to execute ‘setItem’ on ‘Storage’: Setting the value of ‘homemenu’ exceeded the quota.

How can I solve this problem? it’s just impossible to save image data saved in device to localStorage? or is there any alternative way?

 this.camera.getPicture(options).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64:
      if(v==1){
      this.questionPic = 'data:image/jpeg;base64,' + imageData;
      }else{
        this.answerPic = 'data:image/jpeg;base64,' + imageData;
      }
      }, (err) => {
      // Handle error
      });

Posts: 1

Participants: 1

Read full topic

@pdj wrote:

Hello

I have app which has a button.
and If user click button and select one image from gallery, then Image is displayed below of button.
what I want to do is when user click image displayed, I want to redirect to native gallery app and show that image.
the reason is that on ionic, I can’t zoom-in or zoom-out …

how can I redirect to gallery app?

let cameraOptions = {
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      destinationType: this.camera.DestinationType.FILE_URI,
      quality: 100,
      targetWidth: 1000,
      targetHeight: 1000,
      encodingType: this.camera.EncodingType.JPEG,
      correctOrientation: true
    }

    this.camera.getPicture(cameraOptions)
      .then(file_uri => {
          if(v==1){
            this.questionPic = file_uri;
            }else{
              this.answerPic =  file_uri;
            }

Posts: 1

Participants: 1

Read full topic

@mixuala wrote:

I’m trying to migrate an ionic4 start app to rc.0 but I’m having problems with ion-tabs and ion-router-outlet. The docs seem out of date (see:Ionic 4 RC ion-tab is not known element on blank project)

can anyone offer any help?

// beta.16: TabsPageRoutingModule 
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'categories',
        outlet: 'home',
        component: CategoriesPage
      },
      {
        path: 'profile',
        outlet: 'profile',
        component: ProfilePage
      },
      {
        path: 'notifications',
        outlet: 'notifications',
        component: NotificationsPage,
        resolve: {
         data: NotificationsResolver,
       }
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:categories)',
    pathMatch: 'full'
  }
];

// template
<ion-tabs>
  <ion-tab tab="home-view"> // ion-tab was deprecated in beta.18
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>

with the breaking changes from beta.18 (see: https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#angular-tabs), I don’t know where to put

<ion-router-outlet name="home"></ion-router-outlet>

The tabs render correctly, but the actual view does not shows up because there is no where to put it. I can’t find an example.

// after beta.18: TabsPageRoutingModule
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'categories',
        outlet: 'home',
        children:[{
          path: '',
          loadChildren: '../categories/categories.module#CategoriesPageModule'
        }]
      },
      {
        path: 'profile',
        outlet: 'profile',
        children:[{
          path: '',
          loadChildren: '../profile/profile.module#ProfilePageModule'
        }]
      },
      {
        path: 'notifications',
        outlet: 'notifications',
        children:[{
          path: '',
          loadChildren: '../notifications/notifications.module#NotificationsPageModule'
        }],
        resolve: {
         data: NotificationsResolver,
       }
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:categories)',
    pathMatch: 'full'
  }
];

Posts: 1

Participants: 1

Read full topic

@abdullahshafiq63 wrote:

<ion-item>
    <ion-label>Pets</ion-label>
    <ion-select multiple="true">
      <ion-select-option value="p.value" *ngFor="let p of pets" selected="{{p.isSelected}}">
        {{ p.name }}</ion-select-option
      >
    </ion-select>
  </ion-item>

this.pets = [
      {
        value: 'bird1',
        name: 'Bird1',
        isSelected: true
      },
      {
        value: 'bird2',
        name: 'Bird2',
        isSelected: false
      },
      {
        value: 'abc',
        name: 'Abc',
        isSelected: true
      }
    ];

Selected directive is not working properly.

Screenshot 2018-12-31 at 3.17.54 PM.png2860x1278 456 KB

Posts: 1

Participants: 1

Read full topic

@kumarideepika911 wrote:

i am getting stuck on displaying messages according to the date like whatsapp chat.

<div *ngFor=“let message of messages;”>

<div *ngIf="(message.type == ‘text’)&&(message.fromUser !== nickname)" class=“chat-message” [ngClass]="{‘chat-message right’: message.fromUser === nickname, ‘chat-message left’: message.fromUser !== nickname}">

<div class=“message-detail”>

{{message.text}}

<span class=“time”>{{message.created | date:‘dd.MM hh:MM’}}</span>

<br>

</div>

</div>

<br>

<div *ngIf="(message.type == ‘text’)&&(message.fromUser === nickname)" class=“chat-message” [ngClass]="{‘chat-message right’: message.fromUser === nickname, ‘chat-message right’: message.fromUser !== nickname}">

<div class=“chat-message right”>

{{message.text}}

<span class=“time”>{{message.created | date:‘dd.MM hh:MM’}}</span>

<br>

</div>

</div>

<br>

<div *ngIf="(message.type == ‘image’)&&(message.fromUser !== nickname)" class=“chat-message” [ngClass]="{‘my_message’: message.fromUser === nickname, ‘chat-message left’: message.fromUser !== nickname}">

<div class=“message-detail”>

<img src="{{message.location}}" style=“width: 100%” #myImage (click)=“presentImage(myImage)”>

<span class=“time”>{{message.created | date:‘dd.MM hh:MM’}}</span>

<br>

</div>

</div>

<br>

</div>

Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.11
Angular Core: 5.2.11
Angular Compiler CLI: 5.2.11
Node: 8.11.3
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

Posts: 1

Participants: 1

Read full topic

@GiselaMD wrote:

I get this error when i run “ionic cordova platform add ios” and “ionic cordova build ios”, however when i run android it doesn’t happen and “ionic serve” works fine.
Please note that I am using a mac and these command were working fine before.
Grateful if someone can help me. Thanks.

Ionic Info:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) 

local packages:

    @ionic/app-scripts : 3.2.1
    Cordova Platforms  : android 7.1.1 ios 4.5.5
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v8.9.4
    npm               : 5.6.0 
    OS                : macOS High Sierra
    Xcode             : Xcode 9.4.1 Build version 9F2000 

Environment Variables:

    ANDROID_HOME : /Users/Apple/Library/Android/sdk/

Misc:

    backend : pro

Here is the error:

Posts: 1

Participants: 1

Read full topic

@Alhamou wrote:

i use Ionic v4.6.0

i need change the Icon to SVG but how ?

I could not hide the icon of search!

Screenshot_2018-12-31 Ionic App.png1849x171 9.75 KB

Posts: 3

Participants: 2

Read full topic

@andrewdudu wrote:

I try to access my Images from www/assets/imgs folder through file:///android_assets/www/assets/imgs folder, but whenever I add images to src/assets/imgs it doesn’t exist in file:///android_assets/www/assets/imgs folder. How to retrieve my images then?

Posts: 2

Participants: 2

Read full topic

@APrince wrote:

Hi guys,
in my app, I am getting some data through websockets and I need to update some charts whenever I get a new chunk. The problem is that it takes a really long time. The code calculates a FIR filter parameters (whatever, not important) which needs to evaluate thousands of logarithms and other non-JS-friendly operations and the whole process is terribly slow and takes about 20 seconds. That’s not cool, but at least I would like to inform the user that the calculation is in progress (I use Ionic LoadingController) so that he does not try to click on anything, but currently it does not work, probably because the calculation is also blocking the UI updates. What I have is this:

    this.ws = new WebSocket('ws://localhost:3001');
    console.log('ws:', this.ws);
        
    this.ws.onmessage = (data) => {
      this.showLoading(true);
      
      console.log(data);
      const d = data.data.split(' ');
      const elems = d[0];
      const size = d[1];
      for (let i = 0; i < elems; i++){
        let fir = [];
        for (let j = 0; j < size; j++){
          fir.push(d[2 + i * size + j]);
        }
        this.setGraphData(fir, i);  // some heavy calculation in here
      }
      this.showLoading(false);
    };

However, what it does is that it takes that 20 seconds and than the LoadingController flashes on and off instantly. I take it that the whole UI process update process happens after the whole computation.

So I tried making it a Promise, but it behaves the same way.

    this.ws = new WebSocket('ws://localhost:3001');
    console.log('ws:', this.ws);
        
    this.ws.onmessage = (data) => {
      this.showLoading(true);
      var p = new Promise((resolve, reject) => {
        console.log(data);
        const d = data.data.split(' ');
        const elems = d[0];
        const size = d[1];
        for (let i = 0; i < elems; i++){
          let fir = [];
          for (let j = 0; j < size; j++){
            fir.push(d[2 + i * size + j]);
          }
          this.setGraphData(fir, i);
        }
        resolve(true);
      });
      p.then((value) => {
        this.showLoading(false);
        console.log('update done');
      });
      //this.showLoading(false);
    };

Just for reference, the function for showing / hiding the loading spinner looks like:

showLoading(show: boolean){
    if (show){
      this.loading = this.loadingController.create({content : "Recalculating..."});
      this.loading.present();
    }
    else this.loading.dismiss();
}

Do I need web workers for this, or did I just use the Promise incorrectly?

Thanks…

Posts: 1

Participants: 1

Read full topic

@MaykoEstevez wrote:

Hello,

Im trying to set the user info when i login into the app and when i go to the profile page im trying to retrieve the data.

To set and get the user info Im using a separate service

public setStorageUser(user:any){

         return this.storage.set('user', user);

    }
    public getStorageUser():Promise<any>{

            return this.storage.get('user');

    }

Setting value on Login Page

this.loginService.setStorageUser(userData).then(()=>{

          this.navController.setRoot(HomePage);

        });

Retrieving the user data on Profile page

           this.loginService.getStorageUser().then((user)=>{
         console.log(JSON.stringify(user));
        });

I always get null user, help!!

Posts: 1

Participants: 1

Read full topic