CODEWITHSUNDEEP
angular
Gabriel Costin
Gabriel Costin

Reputation: 122

How to implement ngIf in td

I have a table where I insert data from DB, however, I want to edit those data which are qualified based on my checking and therefore should be 2 buttons, 1 for delete and 1 for the edit which would be enabled. If the row inserted in the table is not qualified I want to disable those buttons. What is the right implementation of this scenario?

<tbody>
  <tr *ngFor="let item of reservations">
    <td>{{item.name}}</td>
    <td>{{item.email}}</td>
    <td>{{item.phone}}</td>
    <td>{{item.numberOfGuests}}</td>
    <td>{{item.timetables}}</td>
    <td>{{item.data}}</td>
    <td>
      <div *ngIf="{{item.data}} => today && {{item.data}} <= tomorrow"> <a>Ala bala</a></div>
    </td>
  </tr>
</tbody>

A few things to say: item.data is of type date as MM-dd-YYYY and so is today which is the date of today and so is tomorrow which is the date of tomorrow.

Edit: Posting the error:

Uncaught Error: Template parse errors:
Parser Error: Bindings cannot contain assignments at column 12 in [item.data 
=> today && item.data <= tomorrow] in 
ng:///AppModule/ReservationtableComponent.html@72:33 ("             <td> 
{{item.data}}</td>
                      <td>
                        <div [ERROR ->]*ngIf="item.data => today && item.data 
<= tomorrow"> <a>Ala bala</a></div>
                      "): 
ng:///AppModule/ReservationtableComponent.html@72:33
at syntaxError (compiler.js:1016)
at 
TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler. 
 js.TemplateParser.parse (compiler.js:14813)
at 
JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler 
.js.JitCompiler. _parseTemplate (compiler.js:23992)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js. 
JitCompiler._compileTemplate (compiler.js:23979)
at compiler.js:23922
at Set.forEach (<anonymous>)
at 
JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler. 
js.JitCompiler._compileComponents (compiler.js:23922)
at compiler.js:23832
at Object.then (compiler.js:1007)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler. 
js.JitCompiler._compileModuleAndComponents (compiler.js:23831)

Upvotes: 0

Views: 3767

Answers (3)

Krishna Rathore
Krishna Rathore

Reputation: 9687

use *ngIf="item.data >= today && item.data <= tomorrow" and remove {{ }} from ngIf 

<tbody>
  <tr *ngFor="let item of reservations">
    <td>{{item.name}}</td>
    <td>{{item.email}}</td>
    <td>{{item.phone}}</td>
    <td>{{item.numberOfGuests}}</td>
    <td>{{item.timetables}}</td>
    <td>{{item.data}}</td>
    <td>
      <div *ngIf="item.data >= today && item.data <= tomorrow"> 
          <a>Ala bala</a>
      </div>
    </td>
  </tr>
</tbody>

Upvotes: 0

Abhinav Kumar
Abhinav Kumar

Reputation: 3036

First thing no need of interpolation binding in *ngIf. Inside you can create a button with only one disabled property. Like

<td>
   <button [disabled]="item.editable"> Edit </button>
</td>

Same for delete button as well.

You can set the editable and deletable property in component by checking the rules you want.

I think this would be an easy and clear implementation.

Upvotes: 0

chris01
chris01

Reputation: 12311

You do not need the interpolation brackets in angular-parts (like ngIf).

<div *ngIf="item.data >= today && item.data <= tomorrow"

And you can put *ngIf into td as well as in any other element (html, angular-component).

Upvotes: 1

Related Questions