Dynamic template based on database configuration

Ionic Framework
1

Hi, I posted this same question on StackOverflow.
But I would like the input from the Ionic community as the project is an Ionic app:

I have an Angular application and in some interfaces I need to show/hide some divs based on user configuration that is retrieved from my database.

I was thinking about using *ngIf and doing something like this:

<div *ngIf=“hasConfig(‘blue’)>
     
<ion-item>
    <ion-label color="primary" fixed> Blue div</ion-label>
    <ion-input type="text" [(ngModel)]="object.blue"></ion-input>
</ion-item>

</div>

<div *ngIf=“hasConfig(‘yellow’)>
      <ion-item>
    <ion-label color="primary" fixed> Yellow div</ion-label>
    <ion-input type="text" [(ngModel)]="object.yellow"></ion-input>
</ion-item>
</div>

<div *ngIf=“hasConfig(‘red’)>
      <ion-item>
    <ion-label color="primary" fixed> Red div</ion-label>
    <ion-input type="text" [(ngModel)]="object.red"></ion-input>
</ion-item>
</div>

But I’m afraid that it will harm my app performance and get a little bit messy, because the same situation happens in several parts of my app. And these divs have fields, each with a ngModel that can be sent to the server (my server receive the whole ‘objetc’), it’s like all of them togheter constitute one single form.

The same applies to the main menu, I need to show menus based on permissions that the users are given by an admin. Today I’m doing this with *ngIf, but I’m not sure if that’s the best approach.

I’ve also tought about loading the menus the permissions to show the div inside an array in the component and use that to build the template with some sort of repetition (*ngFor). But I’m having a hard time figuring how to build the divs but keep the models and if that would really improve the performance.

Are there any good practices or solutions that won’t slow down my app in this scenario?

2

This is a pure angular question, I would say and as such maybe read the templating howto on angular.io for hints

One serious performance killer is repeatedlu calling methods in ngIf (e.g. hasConfig(‘red’)). Only adress properties (imho boolean ones). For that matter redundant data is best to get performance conpared to realtime computed values

Secondly if you repeat stuff in pages, better make it a separate component

Some thoughts

1 Like
3

Thank you for your answer.
I’ve seen that done (and I’ve done it myself, but I’m rewriting the app) in a lot of places using *ngIf and I was wondering if that would really be the best way.

4

One other thing: make sure that you aren’t relying on any of this for security, as it’s nigh impossible to restrict functionality client-side. All authorization has to happen server-side. So, for example, if there’s a page that ordinary users aren’t supposed to see that sends requests to /special/sekrit/api, the server responding to that endpoint must perform the checking to make sure the requester has the necessary credentials; you can’t rely only on the app not showing the page.