Asking your advise about dynamic/static loading components/pages/html

Ionic Framework ionic-v3
2

I went through this with Markdown, tried a bunch of things, and here’s what I eventually settled on:

  • Store your objects however is convenient for you. In my case, that’s markdown source.
  • Define two components; we’ll call them skeleton and bone for now.
  • skeleton has an input property giving it the source. In ngOnChanges, you need to parse that source into an array of elements, each corresponding to a different type of bone.
  • skeleton’s template looks something like this:
<template ngFor let-bone [ngForOf]="bones">
  <app-bone [bone]="bone"></app-bone>
</template>
  • Make sure each bone has a discriminator indicating its type, and then the BoneComponent template is a big giant switch:
<blockquote *ngIf="bone.tag === 'blockquote'">
  <app-bone *ngFor="let child of bone.children" [bone]="child"></app-bone>
</blockquote>

<br *ngIf="bone.tag === 'br'">

... every other block-level element we support...

Note that this can work recursively if you need it to, in that the inside of the blockquote case is effectively another skeleton. I’m using HTML elements here, but the general technique works equally well for other user-defined components (as types of bones).

4 Likes