Friday, 25 September 2020

Angular multiple templates in one component based on id (with template store)

I have a special project and I haven't been able to find any information on how I can achieve this.

So on this website companies can register and login. When a company is logged in they have an overview of devices and groups where devices can be divided in different groups for easy recognition. Now the hard part of the website is template management. Each device will display a template which could be a general specified template, a template that was assigned to a specific group or to an individual device. The templates that are chosen are either standard provided templates, custom templates made by the company or custom templates tailored by me. (The last 2 options are only visible for the company itself)

The main reason for this is to display different templates with that I mean structural differences like a table, cards and even custom structures.

So at the moment I am able to display templates based on the id of the company. These templates are integrated within the angular app. So now it kinda looks like this (its just a small example):

    this.companyName = this.route.snapshot.params['company'];
    if(this.companyName == "Google"){
        this.template = `<div [ngStyle]="{'border-left':(tr.state=='busy')?'10px solid #D4061C':'10px solid #2CC52E'}"></div>`;
        this.styles = "div{color: red}";
    }

What happens afterwards is the creation of a component on the fly by keeping the compiler in the build. So this means that this project cannot be build in production mode as the compiler is required. Which means that deploying the project is awful because the code is visible in the browser and the size is much larger so it takes too much time to load everything in. I kinda want to step away from this method and use something else which is easier to use

So what I want to know is:

  • is it possible to load in html from either data in the database or from HTML files.
  • is this possible by using any other library with Angular.
  • is there a way to create an overview of templates that I offer to companies that displays a preview of that template as well?
  • Is there a way to retrieve the ip and mac address of the device that is displaying the template.

If it isn't possible to use Angular for this what environment like language, frameworks, etc. do you advise to use instead?

If more information is required don't hesitate to ask away!

Thanks in Advance!



from Angular multiple templates in one component based on id (with template store)

No comments:

Post a Comment