#Suggestion: multiple templates for a single component

37 messages · Page 1 of 1 (latest)

grizzled kettle
#

I was thinking of some solutions to allow devs have many html snippets in the template context of a component, without polluting its main template file.
Usecase is a component with a switch that select the right ng-template from the ones available.
At the moment the only right way AFAIK is to put all those ng-templates in the component's template file, or to create a bunch of dumb components to be conditionally projected.
What would you think of a additionalTemplateUrls array property for @Component decorator, or to turn templateUrl in an array directly?
(The former would be nicer in term of linting, maybe limiting the content to just ng-templates.)
At some point in the build pipeline these html files would be concatenated in a single template, becoming part of the template context of any component declaring them.
Maybe to much additional code to maintain for the goal?

errant salmon
#

And how would the component decide which template should be used for which kind of data?
A bunch of dumb components with a switch is much more explicit on that and for the most developer also easier to understand.

Also these dump components could be defered and some may use some bigger additional dependencies. How would that work with multiple templates on one component if you need to import everthing for every template in one go?

grizzled kettle
#

dumb components.
Components with no logic but just a template.
It will not be meant to replace conditional content projection for complex scenarios, more for situations where you have the same component displaying static snippets of html, with maybe just simple property interpolation.

errant salmon
#

"simple interpolation" can mean anything from displaying just a buch of text up to displaying some charts. And in the case of charts i would be very happy to defer the loading until I really need it instead of having a "all in one" component with multiple templates. a defered chart component is much better in that case

nimble glen
#

This was supported in AngularJS, but afaik never ported because probably not what we want to be doing.

#

Also why not multiple child components?

#

I am not sure I get the problem trying to be solved tbh

solid frost
#

I think "why not child components" is a good fundamental question here

grizzled kettle
#

Nothing too fancy: just to not having to define new dumb components varying only their templates.

grizzled kettle
# nimble glen I am not sure I get the problem trying to be solved tbh

Real case: I have a component used multiple times, displaying an image and a description of the image represented.
Originally that description should have been plain text, but now it turned out to be rich text with stuff like bullets list that cannot be generated by stylesheet. It can be that, or plain text, or with a layout always different in any case.
The only solution now is to save the html snippet for every possible object description in a ng-template inside the component template, or to create a dedicated component for every object, despite that being just an empty component with a different template each time.

nimble glen
#

Alot of dump components are nothing but that

#

I read 2 different components here.

#

And i also think an ng template is alot easier to reason about than conditional templates or multiple template files combined in one.

#

Also if the only difference is layout, why not solve it with css ?

grizzled kettle
#

How do you add a bullet list with css?

nimble glen
#

Using counters.

#

And content.

#

Just like any custom bullet list is done

#

But if one has list items, and the other doesnt. I think we are talking about either two different components, or one that should just be able to render html and be fully dynamic.

grizzled kettle
#

I'm not a fan of these tricks to emulate layouts with styling definitions, but that's a legit solution, honestly.
I think I'll stuff the ng-templates in component template, tho.

nimble glen
#

This is what css is for tho, changing how things look without changing the DOM.

#

Never did css zengarden? I recommend it.

grizzled kettle
#

I think that makes thing a little bit out of spec: parsers will not get that div as a list.
(i.e. assistive techs and alike)

#

In any case, I cannot exclude client to come off with something even different later, so I'm gonna avoid things like this.

nimble glen
grizzled kettle
#

I think for plain bullet list I wouldn't even need the counter. But that's not the point.

nimble glen
#

Anyway multiple solutions, but multiple template (or conditional templates) is a mistake we made with angularjs, and i believe we shouldnt make again.

nimble glen
grizzled kettle
nimble glen
#

But either accepting html, or multiple components is the way to go. Using ng-template can also work, falls into the realm of multiple components to me, but just inlined using ng template.

nimble glen
#

Easier to talk about component a and b, than component 1 with template a or b.

grizzled kettle
#

Yes, in fact it more or less reduces to some "components-without-ts-code", a bit like (or better, the inverse) directives are "components-without-templates".

nimble glen
#

Which is a very rare case tbh.

#

Sure there are some components without inputs and outputs, but that's isn't going to be many, is it ?

solid frost