CODEWITHSUNDEEP
javascripthtmlangular
D.Dsn
D.Dsn

Reputation: 176

Show button in table based on other cells

I have the following code 

<tbody *ngIf="packages">
              <tr *ngFor="let package of packages">
                <td class='checkbox'>
                  <label class="css-control css-control-primary css-checkbox table-select">
                    <input type="checkbox" class="css-control-input" (click)="selectPackage(package.name)"
                      [checked]="isSelected(package.name)">
                    <span class="css-control-indicator"></span>
                  </label>
                </td>
                <td> {{package.name}}</td>
                <td> {{package.version}}</td>
                <td> {{getNewMajorVersion(package.version)}}</td>
 <!-- <td (click)="createNewMajorVersion(package.name, package.version)"><i class="fa fa-plus-square"
                    aria-hidden="true"></i></td> -->
 <!-- <td><button ng-show = "{{(package.name).includes('_v')">UPGRADE</button></td> -->
      <td> {{(package.name).includes('_v') ? 'YES' : 'NO'}}</td>
     </tr>
</tbody>

Based on my first column package.name I would like to show a button in the last column. The name has to include a version number (_v[0-9]). The purpose is to click the button and upgrade the name.

I'm able to show YES or NO depending on the first column, but showing a button just doesn't want to work. Like u can see in the code I commented out I didn't found a good solution.

The following line <td><button ng-show = "{{(package.name).includes('_v')">UPGRADE</button></td> also shows the button on every row, and not only where he finds "_v"?

Any ideas?

Upvotes: 1

Views: 48

Answers (1)

suresh bambhaniya
suresh bambhaniya

Reputation: 1687

Instead of ng-show use [style.display]

<td><button [style.display] = "package.name.includes('_v') ? 'block' : 'none'" >UPGRADE</button></td>

or you can try [hidden]

<td><button [hidden] = "!package.name.includes('_v')" >UPGRADE</button></td>

add [hidden] { display: none !important;} in css

Upvotes: 1

Related Questions