Question: Adding different templates in a table with angular 2

Question

Adding different templates in a table with angular 2

Answers 2
Added at 2017-01-02 14:01
Tags
Question

I am building a generic table control that I would like to be able to use across many different forms. However some of the different rows will need different templates. The template tag is something that I just don't quite understand.

What i am trying to accomplish is if it is not a calendar then do one thing if it is do another thing.

My attempt:

<tr *ngFor="let row of rows">
  <td *ngIf="canEditRecord">
    <a class="btn fa fa-pencil-square" (click)="navigateToEdit(row.id)"></a>
  </td>
  <td *ngFor="let column of columns" [innerHTML]="getPropertyValue(row, column.propertyName)"></td>
  <td *ngIf="canDelete && canEditRecord">
    <a class="btn fa fa-trash-o" (click)="deleteItem(row.id)"></a>
  </td>
</tr>


<tr *ngFor="let row of rows">
  <td *ngFor="let day of row">{{day.dayNumber}}</td>
</tr>

Then I tried

<template>
  <tr *ngFor="let row of rows">
    <td *ngIf="canEditRecord">
      <a class="btn fa fa-pencil-square" (click)="navigateToEdit(row.id)"></a>
    </td>
    <td *ngFor="let column of columns" [innerHTML]="getPropertyValue(row, column.propertyName)"></td>
    <td *ngIf="canDelete && canEditRecord">
      <a class="btn fa fa-trash-o" (click)="deleteItem(row.id)"></a>
    </td>
  </tr>
</template>


<template>
  <tr *ngFor="let row of rows">
    <td *ngFor="let day of row">{{day.dayNumber}}</td>
  </tr>
</template>

Then I tried


<tr *ngif="!isCalendar" *ngFor="let row of rows">
  <td *ngIf="canEditRecord">
    <a class="btn fa fa-pencil-square" (click)="navigateToEdit(row.id)"></a>
  </td>
  <td *ngFor="let column of columns" [innerHTML]="getPropertyValue(row, column.propertyName)"></td>
  <td *ngIf="canDelete && canEditRecord">
    <a class="btn fa fa-trash-o" (click)="deleteItem(row.id)"></a>
  </td>
</tr>


<tr *ngif="isCalendar" *ngFor="let row of rows">
  <td *ngFor="let day of row">{{day.dayNumber}}</td>
</tr>

Angular2 will not let me use *ngFor and *ngIf in the same statement. Then I thought that I would do something similar *ngIf with [ngSwitch] it didn't like this for the same reason as *ngIF on *ngCase. Can someone please tell me the best way to do this. Please note that I am sure that i will have more templates later in building this, so I think that i should be able to reuse the same solution later.

Answers to

Adding different templates in a table with angular 2

nr: #1 dodano: 2017-01-02 14:01

It is not allowed to use two structural template (*) statements on one element. To avoid having redundant elements you can use the ng-container component to get what you want:

<ng-container *ngIf="!isCalendar">
    <tr *ngFor="let row of rows">
        <td *ngIf="canEditRecord"><a class="btn fa fa-pencil-square" (click)="navigateToEdit(row.id)"></a></td>
        <td *ngFor="let column of columns" [innerHTML]="getPropertyValue(row, column.propertyName)"></td>
        <td *ngIf="canDelete && canEditRecord"><a class="btn fa fa-trash-o" (click)="deleteItem(row.id)"></a></td>
    </tr>
</ng-container>
nr: #2 dodano: 2017-01-02 14:01

You really should have a look at the Template guide. Specifically the section about the template tag.

That said. The * syntax is really just a shortcut for the template usage. You need to look up the directive you want to use for both *ngIf and *ngFor since each have slightly different properties you need to set. The good thing is, you can nest these template components as you see fit without adding any extra dom elements :)

The easiest is *ngIf (*ngIf="!isCalendar"):

<template [ngIf]="!isCalendar">

You can also do *ngFor (*ngFor="let row of rows")

<template ngFor let-row [ngForOf]="rows">

Go nuts and nest these around your normal html elements or even angular components :)

Source Show
◀ Wstecz