angular 5: template binding within table row
How do you bind a template containing tds within a tr?
I have a table that I want column sections to be dynamically added/removed/rearranged.
My tds are grouped into categories, the user can pick categories, and then the sections of the table should be pieced together with if/then logic using the category ids.
I'm having trouble binding my category templates into tr. I've tried:
setting the component selector to "app-componentName" and inputting the component using
<app-componentName></app-componentName>setting the component selector to "[app-componentName]" and inputting the component using
<template app-componentName></template>
but neither works correctly. Using the first option, all of the data from my category is put into one td. Using the second option, none of my categories show up at all.
Here's the gist...
table-row.component.ts
...
var selectedCategories = [
{
id: 2,
name: "billing address"
},
{
id: 1,
name: "name"
}
];
...
table-row.component.html
<ng-container *ngFor="let category of selectedCategories">
<app-name-cells [person]="person" *ngIf="category.id === 1">
<app-billing-address-cells [person]="person" *ngIf="category.id === 2">
</ng-container>
name-cells.component.html
<td>{{user.firstName}}</td>
<td>{{user.middleName}}</td>
<td>{{user.lastName}}</td>
billing-address-cells.component.html
<td>{{user.billingAddress.line1}}</td>
<td>{{user.billingAddress.line2}}</td>
<td>{{user.billingAddress.city}}</td>
<td>{{user.billingAddress.state}}</td>
<td>{{user.billingAddress.zip}}</td>
Result
//full address in first cell, full name in second cell
|| 123 Main St New York NY 12345 | John A Doe ||
Expected Result
// each part of each component in it's own cell
|| 123 Main St | New York | NY | 12345 | John | A | Doe ||
Edit - Added StackBlitz:
See code example: StackBlitz
html angular angular5
edited Nov 21 '18 at 19:38
D Manokhin
584219
asked Nov 21 '18 at 18:14
JEDJED
219114
|
show 1 more comment
How do you bind a template containing tds within a tr?
I have a table that I want column sections to be dynamically added/removed/rearranged.
My tds are grouped into categories, the user can pick categories, and then the sections of the table should be pieced together with if/then logic using the category ids.
I'm having trouble binding my category templates into tr. I've tried:
setting the component selector to "app-componentName" and inputting the component using
<app-componentName></app-componentName>setting the component selector to "[app-componentName]" and inputting the component using
<template app-componentName></template>
but neither works correctly. Using the first option, all of the data from my category is put into one td. Using the second option, none of my categories show up at all.
Here's the gist...
table-row.component.ts
...
var selectedCategories = [
{
id: 2,
name: "billing address"
},
{
id: 1,
name: "name"
}
];
...
table-row.component.html
<ng-container *ngFor="let category of selectedCategories">
<app-name-cells [person]="person" *ngIf="category.id === 1">
<app-billing-address-cells [person]="person" *ngIf="category.id === 2">
</ng-container>
name-cells.component.html
<td>{{user.firstName}}</td>
<td>{{user.middleName}}</td>
<td>{{user.lastName}}</td>
billing-address-cells.component.html
<td>{{user.billingAddress.line1}}</td>
<td>{{user.billingAddress.line2}}</td>
<td>{{user.billingAddress.city}}</td>
<td>{{user.billingAddress.state}}</td>
<td>{{user.billingAddress.zip}}</td>
Result
//full address in first cell, full name in second cell
|| 123 Main St New York NY 12345 | John A Doe ||
Expected Result
// each part of each component in it's own cell
|| 123 Main St | New York | NY | 12345 | John | A | Doe ||
Edit - Added StackBlitz:
See code example: StackBlitz
html angular angular5
edited Nov 21 '18 at 19:38
D Manokhin
584219
asked Nov 21 '18 at 18:14
JEDJED
219114
Much more clear, stackblitz will work good - please do add
– Rahul
Nov 21 '18 at 18:21
stackblitz.com/edit/angular-lajpya
– JED
Nov 21 '18 at 18:53
Getting error in stackblitz
– Suresh Kumar Ariya
Nov 21 '18 at 19:03
I'm aware of this. I got tired of trying to get it to work. It works in my app, but for some reason, in stackblitz, it's trying to bind the object to thetrinstead of theapp-table-rowtemplate.
– JED
Nov 21 '18 at 19:05
its fixed. stackblitz.com/edit/…
– Suresh Kumar Ariya
Nov 21 '18 at 19:06
|
show 1 more comment
How do you bind a template containing tds within a tr?
I have a table that I want column sections to be dynamically added/removed/rearranged.
My tds are grouped into categories, the user can pick categories, and then the sections of the table should be pieced together with if/then logic using the category ids.
I'm having trouble binding my category templates into tr. I've tried:
setting the component selector to "app-componentName" and inputting the component using
<app-componentName></app-componentName>setting the component selector to "[app-componentName]" and inputting the component using
<template app-componentName></template>
but neither works correctly. Using the first option, all of the data from my category is put into one td. Using the second option, none of my categories show up at all.
Here's the gist...
table-row.component.ts
...
var selectedCategories = [
{
id: 2,
name: "billing address"
},
{
id: 1,
name: "name"
}
];
...
table-row.component.html
<ng-container *ngFor="let category of selectedCategories">
<app-name-cells [person]="person" *ngIf="category.id === 1">
<app-billing-address-cells [person]="person" *ngIf="category.id === 2">
</ng-container>
name-cells.component.html
<td>{{user.firstName}}</td>
<td>{{user.middleName}}</td>
<td>{{user.lastName}}</td>
billing-address-cells.component.html
<td>{{user.billingAddress.line1}}</td>
<td>{{user.billingAddress.line2}}</td>
<td>{{user.billingAddress.city}}</td>
<td>{{user.billingAddress.state}}</td>
<td>{{user.billingAddress.zip}}</td>
Result
//full address in first cell, full name in second cell
|| 123 Main St New York NY 12345 | John A Doe ||
Expected Result
// each part of each component in it's own cell
|| 123 Main St | New York | NY | 12345 | John | A | Doe ||
Edit - Added StackBlitz:
See code example: StackBlitz
html angular angular5
edited Nov 21 '18 at 19:38
D Manokhin
584219
asked Nov 21 '18 at 18:14
JEDJED
219114
How do you bind a template containing tds within a tr?
I have a table that I want column sections to be dynamically added/removed/rearranged.
My tds are grouped into categories, the user can pick categories, and then the sections of the table should be pieced together with if/then logic using the category ids.
I'm having trouble binding my category templates into tr. I've tried:
setting the component selector to "app-componentName" and inputting the component using
<app-componentName></app-componentName>setting the component selector to "[app-componentName]" and inputting the component using
<template app-componentName></template>
but neither works correctly. Using the first option, all of the data from my category is put into one td. Using the second option, none of my categories show up at all.
Here's the gist...
table-row.component.ts
...
var selectedCategories = [
{
id: 2,
name: "billing address"
},
{
id: 1,
name: "name"
}
];
...
table-row.component.html
<ng-container *ngFor="let category of selectedCategories">
<app-name-cells [person]="person" *ngIf="category.id === 1">
<app-billing-address-cells [person]="person" *ngIf="category.id === 2">
</ng-container>
name-cells.component.html
<td>{{user.firstName}}</td>
<td>{{user.middleName}}</td>
<td>{{user.lastName}}</td>
billing-address-cells.component.html
<td>{{user.billingAddress.line1}}</td>
<td>{{user.billingAddress.line2}}</td>
<td>{{user.billingAddress.city}}</td>
<td>{{user.billingAddress.state}}</td>
<td>{{user.billingAddress.zip}}</td>
Result
//full address in first cell, full name in second cell
|| 123 Main St New York NY 12345 | John A Doe ||
Expected Result
// each part of each component in it's own cell
|| 123 Main St | New York | NY | 12345 | John | A | Doe ||
Edit - Added StackBlitz:
See code example: StackBlitz
html angular angular5
html angular angular5
edited Nov 21 '18 at 19:38
D Manokhin
584219
asked Nov 21 '18 at 18:14
JEDJED
219114
edited Nov 21 '18 at 19:38
D Manokhin
584219
asked Nov 21 '18 at 18:14
JEDJED
219114
edited Nov 21 '18 at 19:38
D Manokhin
584219
edited Nov 21 '18 at 19:38
D Manokhin
584219
edited Nov 21 '18 at 19:38
D Manokhin
584219
584219
asked Nov 21 '18 at 18:14
JEDJED
219114
asked Nov 21 '18 at 18:14
JEDJED
219114
asked Nov 21 '18 at 18:14
JEDJED
219114
219114
Much more clear, stackblitz will work good - please do add
– Rahul
Nov 21 '18 at 18:21
stackblitz.com/edit/angular-lajpya
– JED
Nov 21 '18 at 18:53
Getting error in stackblitz
– Suresh Kumar Ariya
Nov 21 '18 at 19:03
I'm aware of this. I got tired of trying to get it to work. It works in my app, but for some reason, in stackblitz, it's trying to bind the object to thetrinstead of theapp-table-rowtemplate.
– JED
Nov 21 '18 at 19:05
its fixed. stackblitz.com/edit/…
– Suresh Kumar Ariya
Nov 21 '18 at 19:06
|
show 1 more comment
Much more clear, stackblitz will work good - please do add
– Rahul
Nov 21 '18 at 18:21
stackblitz.com/edit/angular-lajpya
– JED
Nov 21 '18 at 18:53
Getting error in stackblitz
– Suresh Kumar Ariya
Nov 21 '18 at 19:03
I'm aware of this. I got tired of trying to get it to work. It works in my app, but for some reason, in stackblitz, it's trying to bind the object to thetrinstead of theapp-table-rowtemplate.
– JED
Nov 21 '18 at 19:05
its fixed. stackblitz.com/edit/…
– Suresh Kumar Ariya
Nov 21 '18 at 19:06
Much more clear, stackblitz will work good - please do add
– Rahul
Nov 21 '18 at 18:21
Much more clear, stackblitz will work good - please do add
– Rahul
Nov 21 '18 at 18:21
stackblitz.com/edit/angular-lajpya
– JED
Nov 21 '18 at 18:53
stackblitz.com/edit/angular-lajpya
– JED
Nov 21 '18 at 18:53
Getting error in stackblitz
– Suresh Kumar Ariya
Nov 21 '18 at 19:03
Getting error in stackblitz
– Suresh Kumar Ariya
Nov 21 '18 at 19:03
I'm aware of this. I got tired of trying to get it to work. It works in my app, but for some reason, in stackblitz, it's trying to bind the object to the
tr instead of the app-table-row template.– JED
Nov 21 '18 at 19:05
I'm aware of this. I got tired of trying to get it to work. It works in my app, but for some reason, in stackblitz, it's trying to bind the object to the
tr instead of the app-table-row template.– JED
Nov 21 '18 at 19:05
its fixed. stackblitz.com/edit/…
– Suresh Kumar Ariya
Nov 21 '18 at 19:06
its fixed. stackblitz.com/edit/…
– Suresh Kumar Ariya
Nov 21 '18 at 19:06
|
show 1 more comment
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418239%2fangular-5-template-binding-within-table-row%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418239%2fangular-5-template-binding-within-table-row%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Much more clear, stackblitz will work good - please do add
– Rahul
Nov 21 '18 at 18:21
stackblitz.com/edit/angular-lajpya
– JED
Nov 21 '18 at 18:53
Getting error in stackblitz
– Suresh Kumar Ariya
Nov 21 '18 at 19:03
I'm aware of this. I got tired of trying to get it to work. It works in my app, but for some reason, in stackblitz, it's trying to bind the object to the
trinstead of theapp-table-rowtemplate.– JED
Nov 21 '18 at 19:05
its fixed. stackblitz.com/edit/…
– Suresh Kumar Ariya
Nov 21 '18 at 19:06