How to build a complicated local database

[jamesharvey]

Hello guys,

I’m building an app with many html pages containing different info.
Each page needs different media files loaded inside and each of them can be navigated using a search bar implemented as a part of menu.
I realized this configuration is not be the best and am trying to downsize the number of pages into only one and build a local database to load data to divs on my page.

How do you guys configure this kind of set up?
and how can I make search result load data and lots of media files properly to many different divs?
Especially, how can I make specific functions loaded from a database?
So, with a single click on search database, the whole content of HTML page should change.
I would appreciate any example ts files or relevant tutorials.

Thanks,

[robinyo]

-> I am trying to downsize the number of pages

Angular supports dynamic content:

• https://denysvuika.blog/2017/10/07/dynamic-content-in-angular/
• https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e
• https://stackoverflow.com/questions/45376628/angular-2-4-component-with-dynamic-template-or-templateurl

Or you could use ng-dynamic-forms and describe your ‘forms’ using JSON:

• http://ng2-dynamic-forms.udos86.de/sample/index.aot.html#/ng-bootstrap-sample-form
• https://github.com/udos86/ng-dynamic-forms
• https://github.com/udos86/ng-dynamic-forms/tree/master/packages/ui-ionic
• https://angular.io/guide/dynamic-form

For example:

ngOnInit() {

    this.http.get<object[]>('./app/my-dynamic-form.model.json').subscribe(formModelJson => {

        this.formModel = this.formService.fromJSON(formModelJson);
        this.formGroup = this.formService.createFormGroup(this.formModel);
    });
}

[jamesharvey]

Thanks for your response, I decided to study Angular more on this topic!