2

I am developing something like a CMS. I have articles which have templates. Articles are added on backend and I need to display them using templates (when I am rendering the article, I know which template to use). Since there will 10s of templates, I am trying to figure out what is the best way to store the templates and how to load the correct template according to loaded article. What I am considering:

  • Storing metadata about a template on backend and building the template when I need it
  • Storing the templates in application (need to build the app when new template is created)
  • Storing raw templates on backend
  • Having a component for each template and load them dynamically (too much overhead)

I am looking for an architectural and technological solution. I would love to go with option 1, but don't know how to build a template for article component. I would love to have just one component, which gets the article and just loads (builds) the needed template.

Angular2 RC5

EDIT:

template A: set A of css rules (blue text, caps for headlines), headline, paragraph, image, paragraph and a link somewhere else (inside the paragraph) template B: set B of css rules (red text, regular headlines), headline, carousel for images, one paragraph

{
"templateId": 1,
"title": "Article title",
"elements": [{
    "text": "paragraph text"
}, {
    "image": "http: //someurl.com"
}, {
    "text": "another paragraph text"
}]

}

Zoidy
  • 362
  • 4
  • 21
  • Generally speaking, Angular2 wants the template compiled and deployed WITH the rest of the app. Would the templates just have a different layout? Or would there be behavioral differences as well? IMO a single component with an ngSwitch statement that swaps between one of the article templates is your best bet. – cDecker32 Sep 08 '16 at 11:45
  • I've added some examples for templates. Is it even possible to build a template based on let's say array of elements I should add in the template. I've considered ngSwitch or ngIf, I just think it's gonna get way too complex in time. – Zoidy Sep 08 '16 at 12:03
  • I'm not sure what you're asking by "an array of elements to add into the template". but I'll post an answer to what I think your BEST bet is here. – cDecker32 Sep 08 '16 at 12:17

1 Answers1

1

I think your best bet is to have a component for each style, with a parent component that uses an ngSwitch to swap between the articles. So...

<article-component>
  <div ngSwitch="article.type">
    <template-a *ngSwitchCase="a" [article]="article">
    </template-a>
    <template-b *ngSwitchCase="b" [article]="article">
    </template-b>
    <template-c *ngSwitchCase="c" [article]="article">
    </template-c>
  </div>
</article-component>

Beyond that I'm not sure what else you can do without knowing what the "article" data model looks like.

EDIT: Ok after seeing your proposed data model, inside your templates you could do a ngSwitch inside an ngFor that iterates over your "elements" array. I know this is kind of janky, but it's likely your best bet. And then obv shared "paragraph", "image", and "carousel" components to be used between the different article templates.

cDecker32
  • 813
  • 1
  • 10
  • 20
  • Would this mean I'd still have to have seperate components for every template I prepare ? – Zoidy Sep 08 '16 at 13:05
  • Basically yes. you can still have some flexibility in your templates as well to reduce the number of duplicates. Without seeing your data model for this I can't really comment more. And if you don't like my answer you can try using .createComponent() http://stackoverflow.com/questions/37618222/how-do-i-dynamically-inject-an-angular2-sub-component-via-typescript-code – cDecker32 Sep 08 '16 at 13:20
  • I am still thinking over the data model, but I added my draft to my question. Thank you for your help so far – Zoidy Sep 08 '16 at 13:33