Angular2 use template as selector

Question

I have been trying to implement a template component for some time to fit groups of tr's into a tbody table (templates are the only thing apart from tr's that are acceptable).

Has anyone had luck extending template as a selector for example:

@Component({
selector: 'template [extended]', ...
})

and then in some other component html template to call the component like so?

<template extended></template>

When I try a simple example like above I'm getting Template parse and component on an embedded template errors

Günter Zöchbauer · Accepted Answer · 2016-09-14 12:43:07Z

3

Angular doesn't add <template> elements to the DOM. Also IE doesn't support the <template> tag within <table> or <ul>

I guess attribute directives can help you to achieve what you want (just a guess because I don't know what exactly you try to accomplish)

@Component({
  selector: 'tr[extended]', ...
})

and use it like

<tr extended><tr>

answered Sep 14, 2016 at 12:43

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nelson Over a year ago

This does work but I'm trying to implement a set of <tr> rows as one functional unit for user input. When one row is clicked, form elements on the second row shows up using first row's data via *ngIf. Hence trying to wrap them into one component with state

Günter Zöchbauer Over a year ago

I don't see a way using a component. I guess this should work with a structural directive. They are used with <template> (angular.io/docs/ts/latest/guide/structural-directives.html).

Nelson Over a year ago

Thanks for that. I ended up going with template. My solution was to implement each set of rows inside template tag, repeating the set with the ngFor directive. State can be saved in one of the rows like so <tr extended #firstRow></tr>... <tr *ngIf="firstRow.something"></tr>

Günter Zöchbauer Over a year ago

There is also ngForTemplate and ngTemplateOutlet (not sure if they are helpful for what you are doing).

Maximilian Riegler · Accepted Answer · 2016-09-14 12:42:40Z

1

The template tag is an inbuilt component, which does not actually render to the view. With it you can for instance circumvent situations where you would need a *ngIf and *ngFor on the same component.

answered Sep 14, 2016 at 12:42

Maximilian Riegler

23.6k4 gold badges65 silver badges73 bronze badges

Collectives™ on Stack Overflow

Angular2 use template as selector

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related