Hide-show buttons

Question

I have 3 buttons in my template (tbody):

 <tbody>
   <tr *ngFor="let service_rec of list.servicelist">
       <td colspan="3"> {{ service_rec.name }} </td>
       <td align="center" valign="middle">

         // 1 - button
         <button [style.background-color]="service_rec.status == 
           'Online' ? 'green' : 'red'" 
            class="btn btn-default">
            {{ service_rec.status }}
         </button>
        </td>
        <td align="center">

             // 2 - button
            <button *ngIf="!!service_rec.servicecontrolled"
               [style.background-color]="service_rec.controlled == 
               'true' ? 'green' : 'orange'"
                class="btn btn-warning" 
               (click)="onPost(service_rec.title, 
               service_rec.status, service_rec.id)">
               {{ service_rec.servicecontrolled | json | stopPipe }}
            </button>

            // 3 - button
            <button *ngIf="!!service_rec.servicecontrolled"
               [style.background-color]="service_rec.controlled == 
               'true' ? 'green' : 'orange'"
                class="btn btn-warning" 
               (click)="onStartPost(service_rec.title, 
                service_rec.status, service_rec.id)">
                {{ service_rec.servicecontrolled | json | startPipe }}
             </button>
         </td>
   </tr>
 </tbody>

And now i would show/hide 3 - button, when:

1 - button: Online -> then show 2 button - Stop (stopPipe) - and hide 3 - button

And if:

1 - button: Offline -> then show 3 button - Start (startPipe) - and hide 2 - button

How do this? with ngShow? or what?

score 1 · Accepted Answer · answered Aug 10 '16 at 14:52

You can try with <template> tag right ?

<td align="center">
    <template *ngIf="service_rec.status=='Online'">
         // 2 - button
        <button *ngIf="!!service_rec.servicecontrolled"
           [style.background-color]="service_rec.controlled == 
           'true' ? 'green' : 'orange'"
            class="btn btn-warning" 
           (click)="onPost(service_rec.title, 
           service_rec.status, service_rec.id)">
           {{ service_rec.servicecontrolled | json | stopPipe }}
        </button>
    </template>

    <template *ngIf="service_rec.status=='Offline'">

        // 3 - button
        <button *ngIf="!!service_rec.servicecontrolled"
           [style.background-color]="service_rec.controlled == 
           'true' ? 'green' : 'orange'"
            class="btn btn-warning" 
           (click)="onStartPost(service_rec.title, 
            service_rec.status, service_rec.id)">
            {{ service_rec.servicecontrolled | json | startPipe }}
         </button>
    </template>
</td>

ill do this, add ` – Eduard Arevshatyan Aug 11 '16 at 10:54 — Eduard Arevshatyan, Aug 11 '16 at 10:54

score 0 · Answer 2 · edited May 23 '17 at 10:30

0

Here's a good trick written in this answer: What is the equivalent of ngShow and ngHide in Angular2?

Also you can toggle a class with display: none; using [ngClass]

edited May 23 '17 at 10:30

Community

1
1

answered Aug 10 '16 at 14:40

Khaled Al-Ansari

3,910
2
24
27

Hide-show buttons

2 Answers2