Ionic 3 innerhtml api rest service grid

#1

Hello there, i have my login page that log a person into their own platform, because i have 3 types of users, and i need to charge just the boxes that the user has paid, for example i have General, Inventory, Accounting, etc. And the user just pay for what they need maybe the first two boxes, so i need,for that user, to hide the boxes he didnt pay for. And i could do it, but the page does not seem well because of the order, i mean there is one in the top, two in the middle and so. That’s why i need a way to order ONLY the boxes(one next to other) that were paid.
THIS IS MY CODE:

PAGE.TS

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { LoginProvider } from '../../providers/login/login';

@IonicPage()
@Component({
  selector: 'page-administrador',
  templateUrl: 'administrador.html',
})
export class AdministradorPage {

  public permisos;
  public tipo;
  userData: any;
  datosResp: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, 
   public _lp: LoginProvider) {

  }

  ngAfterViewInit(){

    // HERE I BRING THE PERMITS THEY HAVE
    this.permisos = localStorage.getItem('permisos');
    var per = this.permisos.split(",");

    var addApps = '';
    
     //HERE I CREATE THE HTML FOR EACH ITEM
      var general =    '<ion-col>'+
                          '<img src="../../assets/imgs/pa.jpg"/>'+
                          '<h2 ion-item>General</h2>'+
                       '</ion-col>';

      var tesoreria =  '<ion-col>'+
                          '<img src="../../assets/imgs/pa.jpg"/>'+
                          '<h2 ion-item>tesoreria</h2>'+
                       '</ion-col>';

      var inventario =  '<ion-col>'+
                           '<img src="../../assets/imgs/pa.jpg"/>'+
                           '<h2 ion-item>inventario</h2>'+
                         '</ion-col>';

      var cobranza =   '<ion-col>'+
                          '<img src="../../assets/imgs/pa.jpg"/>'+
                          '<h2 ion-item>cobranza</h2>'+
                       '</ion-col>';

     var contabilidad = '<ion-col>'+
                          '<img src="../../assets/imgs/pa.jpg"/>'+
                          '<h2 ion-item>contabilidad</h2>'+
                        '</ion-col>';
  

     // HERE I ADD IT TO A VARIABLE IF THE USER HAS PAID FOR IT
     if(per.includes('2')){
        addApps += general;
     }
     if(per.includes('3')){
        addApps += tesoreria;
     }
     if(per.includes('4')){
        addApps += inventario;
     }
     if(per.includes('5')){
        addApps += cobranza;
     }
     if(per.includes('6')){
        addApps += contabilidad;
     }


    // AND HERE I PUT ALL INFO IN THE HTML WHICH ID IS "APPS"
    document.getElementById("apps").innerHTML = addApps;


   }

HERE IS A PICTURE OF MY PROJECT IN CHROME

What i need is that cols order automatically next to the other or if there are already two in a line, it may appear under the two first cols. Thaks in advance and PLEASE HELP ME :c

#2

This runs completely contrary to how Angular apps are built. Put all that HTML in templates and stop messing with the DOM from inside your controller code. Build up an array of business logic objects in the controller, and iterate across it using ngFor in the template.

1 Like
#3

Very thank you, i did it, just as you said :slight_smile: