CODEWITHSUNDEEP
javascriptangularionic-frameworktabsionic2
Brieuc
Brieuc

Reputation: 4114

Ionic 2 : Refresh tabs view after adding a new dynamic tab

I'm using ionic tabs. Some tabs are generated from database (the ones without icons)

ionic dynamic tabs

Now when i add a new tab and refresh the array i should get 3 dynamic tabs. Instead i have 5 (the 2 previous ones and the 2 previous ones with the newest created tab) Despite the array correctly has 3 objects.

Add dynamic tab

Dynamic tab added

[Object, Object, Object]

enter image description here

So here the related code (the tabs component has an event that listen to a tab creation) :

// tabs.ts

import { Component } from '@angular/core';
import { Events } from 'ionic-angular';
import { DatabaseService } from "../../providers/database.service";

import { ItemsPage } from '../items/items';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import { CategoryPage } from '../category/category';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  categories: any = [];

  tab1Root = HomePage;
  tab2Root = CategoryPage;
  tab3Root = ItemsPage;
  tab4Root = ContactPage;

  constructor(public databaseService: DatabaseService, public events: Events) {
      this.events.subscribe('category:created', () => {
      this.refreshTabs();
    });
  }

  ngOnInit() {
    this.refreshTabs();
  }

  refreshTabs() {
    this.databaseService.getCategories().then(categories => {
      this.categories = categories;
      console.log(this.categories); // [Object, Object, Object]
    });
  }

}

So anytime i add or edit a tab i call :

this.events.publish('category:created');

tabs.html :

<ion-tab [root]="tab2Root" tabTitle="{{ category.name }}" [rootParams]="category.id" *ngFor="let category of categories"></ion-tab>

Any idea why the view on the tabs is incorrect?

UPDATE :

It seems using this.category.push({id: 1, name: 'a category name'}) is working but i'd would rather refresh the entire array so i can order the way i want it from the sql query.

Subject has been posted on ionic forum as well

Upvotes: 37

Views: 6252

Answers (4)

Srikar Phani Kumar M
Srikar Phani Kumar M

Reputation: 1384

I think the best way to solve this issue for now is to do this:

// Wherever you are calling push, refresh the tabs as well

// Like this: 

yourMethodWhereYouPush() {
  this.category.push({id: 1, name: 'a category name'}); 
  this.refreshTabs(); // Add this line so that once you push it, immediately the tabs will be refreshed with new data;
}

Upvotes: 0

Teja MS
Teja MS

Reputation: 410

refreshTabs() {
    this.databaseService.getCategories().then(categories => {
      this.categories = categories;
      this.categories = [...this.categories]
      console.log(this.categories); // [Object, Object, Object]
    });
}

You can apply this.

Upvotes: 0

Fred Peixoto
Fred Peixoto

Reputation: 51

Use this in your constructor to detect change and refresh your page.

constructor(private ref: ChangeDetectorRef){}

 refreshTabs() {
    this.databaseService.getCategories().then(categories => {
      this.categories = categories;
      console.log(this.categories); // [Object, Object, Object]
      this.changeDetectorRef.detectChanges();
    });
  });
  }

Upvotes: 0

Swapnil Patwa
Swapnil Patwa

Reputation: 4099

Try triggering change detection manually -

import { Component, NgZone } from '@angular/core';
import { Events } from 'ionic-angular';
import { DatabaseService } from "../../providers/database.service";

import { ItemsPage } from '../items/items';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import { CategoryPage } from '../category/category';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  categories: any = [];

  tab1Root = HomePage;
  tab2Root = CategoryPage;
  tab3Root = ItemsPage;
  tab4Root = ContactPage;

  constructor(public databaseService: DatabaseService, public events: Events, private ngZone: NgZone) {
      this.events.subscribe('category:created', () => {
      this.refreshTabs();
    });
  }

  ngOnInit() {
    this.refreshTabs();
  }

  refreshTabs() {
    this.databaseService.getCategories().then(categories => {
    this.ngZone.run(() => {
      this.categories = categories;
      console.log(this.categories); // [Object, Object, Object]
    });
  });
  }

}

Upvotes: 1

Related Questions