Angular 7 mat-table each row reusable component












-1














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.










share|improve this question



























    -1














    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.










    share|improve this question

























      -1












      -1








      -1







      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.










      share|improve this question













      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






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Dec 27 '18 at 22:08









      SeaBiscuit

      1,15431124




      1,15431124
























          1 Answer
          1






          active

          oldest

          votes


















          1














          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






          share|improve this answer























          • 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











          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
          });


          }
          });














          draft saved

          draft discarded


















          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









          1














          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






          share|improve this answer























          • 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
















          1














          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






          share|improve this answer























          • 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














          1












          1








          1






          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






          share|improve this answer














          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







          share|improve this answer














          share|improve this answer



          share|improve this answer








          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


















          • 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


















          draft saved

          draft discarded




















































          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.




          draft saved


          draft discarded














          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





















































          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







          Popular posts from this blog

          Monofisismo

          Angular Downloading a file using contenturl with Basic Authentication

          Olmecas