Angular 7 mat-table each row reusable component
How can each row in mat-table be reusable component ?
In regular html table i use this approach
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-left width-50" ></th>
<th class="text-left width-85">Id</th>
<th class="text-left">Price</th>
<th class="text-left width-160">City</th>
<th class="text-left width-160">State</th>
<th class="text-left width-160">Qty</th>
<th class="text-left width-160">Action</th>
</tr>
</thead>
<tbody>
<tr pdp-adjustment-list-item *ngFor="let currentItem of pagedResponse?.content"
(idCheckedOutput)="addItemIdToCheckedArray($event)"
[item]="currentItem" >
</tr>
</tbody>
</table>
pdp-adjustment-list-item is selector of AdjustmentListItemComponent.
This is convenient because each row is one same instance of AdjustmentListItemComponent with reactive form and one @Input() item i pass object in in a loop.
This is clean and intuitive.
Now, in Angular7 material table examples i could find everything is placed in one uber component.
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
If this is true, and you actually must keep everything in one uber component, this will not only be poor design choice when we talk about reusability, but also having to keep everything in one component creates huge mess of spaghetti code.
So way around this would be to dynamically create one reactive form for each row in uber component, and then utilize form array, but what is the point? Actually i did that and decided to delete it because code would be totally unmaintainable.
angular html-table angular-material
add a comment |
How can each row in mat-table be reusable component ?
In regular html table i use this approach
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-left width-50" ></th>
<th class="text-left width-85">Id</th>
<th class="text-left">Price</th>
<th class="text-left width-160">City</th>
<th class="text-left width-160">State</th>
<th class="text-left width-160">Qty</th>
<th class="text-left width-160">Action</th>
</tr>
</thead>
<tbody>
<tr pdp-adjustment-list-item *ngFor="let currentItem of pagedResponse?.content"
(idCheckedOutput)="addItemIdToCheckedArray($event)"
[item]="currentItem" >
</tr>
</tbody>
</table>
pdp-adjustment-list-item is selector of AdjustmentListItemComponent.
This is convenient because each row is one same instance of AdjustmentListItemComponent with reactive form and one @Input() item i pass object in in a loop.
This is clean and intuitive.
Now, in Angular7 material table examples i could find everything is placed in one uber component.
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
If this is true, and you actually must keep everything in one uber component, this will not only be poor design choice when we talk about reusability, but also having to keep everything in one component creates huge mess of spaghetti code.
So way around this would be to dynamically create one reactive form for each row in uber component, and then utilize form array, but what is the point? Actually i did that and decided to delete it because code would be totally unmaintainable.
angular html-table angular-material
add a comment |
How can each row in mat-table be reusable component ?
In regular html table i use this approach
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-left width-50" ></th>
<th class="text-left width-85">Id</th>
<th class="text-left">Price</th>
<th class="text-left width-160">City</th>
<th class="text-left width-160">State</th>
<th class="text-left width-160">Qty</th>
<th class="text-left width-160">Action</th>
</tr>
</thead>
<tbody>
<tr pdp-adjustment-list-item *ngFor="let currentItem of pagedResponse?.content"
(idCheckedOutput)="addItemIdToCheckedArray($event)"
[item]="currentItem" >
</tr>
</tbody>
</table>
pdp-adjustment-list-item is selector of AdjustmentListItemComponent.
This is convenient because each row is one same instance of AdjustmentListItemComponent with reactive form and one @Input() item i pass object in in a loop.
This is clean and intuitive.
Now, in Angular7 material table examples i could find everything is placed in one uber component.
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
If this is true, and you actually must keep everything in one uber component, this will not only be poor design choice when we talk about reusability, but also having to keep everything in one component creates huge mess of spaghetti code.
So way around this would be to dynamically create one reactive form for each row in uber component, and then utilize form array, but what is the point? Actually i did that and decided to delete it because code would be totally unmaintainable.
angular html-table angular-material
How can each row in mat-table be reusable component ?
In regular html table i use this approach
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-left width-50" ></th>
<th class="text-left width-85">Id</th>
<th class="text-left">Price</th>
<th class="text-left width-160">City</th>
<th class="text-left width-160">State</th>
<th class="text-left width-160">Qty</th>
<th class="text-left width-160">Action</th>
</tr>
</thead>
<tbody>
<tr pdp-adjustment-list-item *ngFor="let currentItem of pagedResponse?.content"
(idCheckedOutput)="addItemIdToCheckedArray($event)"
[item]="currentItem" >
</tr>
</tbody>
</table>
pdp-adjustment-list-item is selector of AdjustmentListItemComponent.
This is convenient because each row is one same instance of AdjustmentListItemComponent with reactive form and one @Input() item i pass object in in a loop.
This is clean and intuitive.
Now, in Angular7 material table examples i could find everything is placed in one uber component.
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
If this is true, and you actually must keep everything in one uber component, this will not only be poor design choice when we talk about reusability, but also having to keep everything in one component creates huge mess of spaghetti code.
So way around this would be to dynamically create one reactive form for each row in uber component, and then utilize form array, but what is the point? Actually i did that and decided to delete it because code would be totally unmaintainable.
angular html-table angular-material
angular html-table angular-material
asked Dec 27 '18 at 22:08
SeaBiscuit
1,15431124
1,15431124
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Sound like pdp-adjustment-list-item is something like
<td *ngFor="let ....
but is exactly the same here, you define the columns and the rows are generated dynamically based on the "datasource".
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
you even can make the columns definitions been generated dynamically
<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
<mat-cell *matCellDef="let element" >
{{ element[column] }}
</mat-cell>
</ng-container>
Inspect this example from the material docs
Example of material with reactive forms
How would i achieve "one reactive form per one row" using this approach? How would this help me when i need each row to carry certain logic? I have no problem what so ever simply displaying data.
– SeaBiscuit
Dec 27 '18 at 22:42
rows: FormArray = this.fb.array(); form: FormGroup = this.fb.group({ 'streams': this.rows, });
rows will be populated when you get your datasource, you will create one formGoup per row and you can access them by index.<td mat-cell *matCellDef="let element; let index = index" [formGroupName]="index">
– Sinuee Hernández
Dec 27 '18 at 22:59
Example with reactive forms
– Sinuee Hernández
Dec 27 '18 at 23:30
this is actually really good. Much simpler than what i originally wrote. thnks
– SeaBiscuit
Dec 27 '18 at 23:35
add a comment |
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%2f53951358%2fangular-7-mat-table-each-row-reusable-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sound like pdp-adjustment-list-item is something like
<td *ngFor="let ....
but is exactly the same here, you define the columns and the rows are generated dynamically based on the "datasource".
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
you even can make the columns definitions been generated dynamically
<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
<mat-cell *matCellDef="let element" >
{{ element[column] }}
</mat-cell>
</ng-container>
Inspect this example from the material docs
Example of material with reactive forms
How would i achieve "one reactive form per one row" using this approach? How would this help me when i need each row to carry certain logic? I have no problem what so ever simply displaying data.
– SeaBiscuit
Dec 27 '18 at 22:42
rows: FormArray = this.fb.array(); form: FormGroup = this.fb.group({ 'streams': this.rows, });
rows will be populated when you get your datasource, you will create one formGoup per row and you can access them by index.<td mat-cell *matCellDef="let element; let index = index" [formGroupName]="index">
– Sinuee Hernández
Dec 27 '18 at 22:59
Example with reactive forms
– Sinuee Hernández
Dec 27 '18 at 23:30
this is actually really good. Much simpler than what i originally wrote. thnks
– SeaBiscuit
Dec 27 '18 at 23:35
add a comment |
Sound like pdp-adjustment-list-item is something like
<td *ngFor="let ....
but is exactly the same here, you define the columns and the rows are generated dynamically based on the "datasource".
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
you even can make the columns definitions been generated dynamically
<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
<mat-cell *matCellDef="let element" >
{{ element[column] }}
</mat-cell>
</ng-container>
Inspect this example from the material docs
Example of material with reactive forms
How would i achieve "one reactive form per one row" using this approach? How would this help me when i need each row to carry certain logic? I have no problem what so ever simply displaying data.
– SeaBiscuit
Dec 27 '18 at 22:42
rows: FormArray = this.fb.array(); form: FormGroup = this.fb.group({ 'streams': this.rows, });
rows will be populated when you get your datasource, you will create one formGoup per row and you can access them by index.<td mat-cell *matCellDef="let element; let index = index" [formGroupName]="index">
– Sinuee Hernández
Dec 27 '18 at 22:59
Example with reactive forms
– Sinuee Hernández
Dec 27 '18 at 23:30
this is actually really good. Much simpler than what i originally wrote. thnks
– SeaBiscuit
Dec 27 '18 at 23:35
add a comment |
Sound like pdp-adjustment-list-item is something like
<td *ngFor="let ....
but is exactly the same here, you define the columns and the rows are generated dynamically based on the "datasource".
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
you even can make the columns definitions been generated dynamically
<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
<mat-cell *matCellDef="let element" >
{{ element[column] }}
</mat-cell>
</ng-container>
Inspect this example from the material docs
Example of material with reactive forms
Sound like pdp-adjustment-list-item is something like
<td *ngFor="let ....
but is exactly the same here, you define the columns and the rows are generated dynamically based on the "datasource".
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
you even can make the columns definitions been generated dynamically
<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
<mat-cell *matCellDef="let element" >
{{ element[column] }}
</mat-cell>
</ng-container>
Inspect this example from the material docs
Example of material with reactive forms
edited Dec 27 '18 at 23:33
answered Dec 27 '18 at 22:37
Sinuee Hernández
825
825
How would i achieve "one reactive form per one row" using this approach? How would this help me when i need each row to carry certain logic? I have no problem what so ever simply displaying data.
– SeaBiscuit
Dec 27 '18 at 22:42
rows: FormArray = this.fb.array(); form: FormGroup = this.fb.group({ 'streams': this.rows, });
rows will be populated when you get your datasource, you will create one formGoup per row and you can access them by index.<td mat-cell *matCellDef="let element; let index = index" [formGroupName]="index">
– Sinuee Hernández
Dec 27 '18 at 22:59
Example with reactive forms
– Sinuee Hernández
Dec 27 '18 at 23:30
this is actually really good. Much simpler than what i originally wrote. thnks
– SeaBiscuit
Dec 27 '18 at 23:35
add a comment |
How would i achieve "one reactive form per one row" using this approach? How would this help me when i need each row to carry certain logic? I have no problem what so ever simply displaying data.
– SeaBiscuit
Dec 27 '18 at 22:42
rows: FormArray = this.fb.array(); form: FormGroup = this.fb.group({ 'streams': this.rows, });
rows will be populated when you get your datasource, you will create one formGoup per row and you can access them by index.<td mat-cell *matCellDef="let element; let index = index" [formGroupName]="index">
– Sinuee Hernández
Dec 27 '18 at 22:59
Example with reactive forms
– Sinuee Hernández
Dec 27 '18 at 23:30
this is actually really good. Much simpler than what i originally wrote. thnks
– SeaBiscuit
Dec 27 '18 at 23:35
How would i achieve "one reactive form per one row" using this approach? How would this help me when i need each row to carry certain logic? I have no problem what so ever simply displaying data.
– SeaBiscuit
Dec 27 '18 at 22:42
How would i achieve "one reactive form per one row" using this approach? How would this help me when i need each row to carry certain logic? I have no problem what so ever simply displaying data.
– SeaBiscuit
Dec 27 '18 at 22:42
rows: FormArray = this.fb.array(); form: FormGroup = this.fb.group({ 'streams': this.rows, });
rows will be populated when you get your datasource, you will create one formGoup per row and you can access them by index. <td mat-cell *matCellDef="let element; let index = index" [formGroupName]="index">
– Sinuee Hernández
Dec 27 '18 at 22:59
rows: FormArray = this.fb.array(); form: FormGroup = this.fb.group({ 'streams': this.rows, });
rows will be populated when you get your datasource, you will create one formGoup per row and you can access them by index. <td mat-cell *matCellDef="let element; let index = index" [formGroupName]="index">
– Sinuee Hernández
Dec 27 '18 at 22:59
Example with reactive forms
– Sinuee Hernández
Dec 27 '18 at 23:30
Example with reactive forms
– Sinuee Hernández
Dec 27 '18 at 23:30
this is actually really good. Much simpler than what i originally wrote. thnks
– SeaBiscuit
Dec 27 '18 at 23:35
this is actually really good. Much simpler than what i originally wrote. thnks
– SeaBiscuit
Dec 27 '18 at 23:35
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53951358%2fangular-7-mat-table-each-row-reusable-component%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