how to change button value on click

Question

how to change button label name on click of the same button? if button name is visible on click it should change to invisible and again if its clicked on invisible it should change to visible

company.html

<div>
  <table class="table">
    <thead>
      <th>Company Name</th>
      <th>App Visibility</th>
    </thead>
    <tbody>
      <tr *ngFor="let company of companies">
        <td>{{company.name}}</td>
        <td *ngIf="company.visiblity == 'Invisible'" >
          <button class="invisible" (click)="checkVisible(company)">{{company.visiblity}}</button>
        </td>
        <td *ngIf="company.visiblity == 'Visible'" >
          <button  class="visible" >{{ company.visiblity}} </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

company.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-company',
  templateUrl: './company.html'
})
export class CompanyComponent implements OnInit {

  constructor() {}
  public companies: Array<any>;
  public status: boolean;

  ngOnInit() { 
   this.companies = [{"name":"Bombardier", "visiblity":"Invisible" },
{"name":"Honda Marine", "visiblity":"Visible" }];
  }

  checkVisible(company){
   if(company.visiblity == 'visible'){
    company.visiblity = 'invisible';
    console.log(company.visiblity);
   }
   if(company.visiblity == 'invisible'){
    company.visiblity = 'visible';
    console.log(company.visiblity);
   }
  }
}

Answer 1

Here issue in your code is case sensitivity

Change 'visible' to 'Visible' and 'invisible' to 'Invisible' in your component.

---

Suggestion You can achieve the same thing by changing your code

From :

<td *ngIf="company.visiblity == 'Invisible'" >
    <button class="invisible" (click)="checkVisible(company)">{{company.visiblity}}</button>
</td>
<td *ngIf="company.visiblity == 'Visible'" >
    <button  class="visible" >{{ company.visiblity}} </button>
</td>

To :

<td>
    <button  [ngClass]="{'visible': company.visiblity == 'Visible' }"  
            (click)="company.visiblity == 'Invisible' ? checkVisible(company) : false ">
            {{ company.visiblity}} 
    </button>
</td>

Answer 2

I don't really get what you want. But according to the title you want to change the text of the button when you click it. Here is an example that does that.

var btn = document.getElementById('btn');
var visible = true;

btn.onmousedown = function(){
 if(visible){
   btn.innerHTML = "Button";
    visible = false;
  }else{
   btn.innerHTML = "";
    visible = true;
  }
}

<button id="btn">Button</button>

Answer 3

<td>
   <button  class="visible" (click)="clickFunc(company)">{{ company.visibility }} </button>
</td>

...

clickFunc(company): void {
   if(company.visiblity == 'visible'){
    company.visiblity = 'invisible';
  }
  if(company.visiblity == 'invisible'){
    company.visiblity = 'visible';
  }
}

Answer 4

If I understood your issue correctly - you are trying to change text on a button on click.

I think your issue is that you are updating an object reference rather than the object within array you are rendering.

Replace your two td with *ngIf with a single td

HTML

   <button class="invisible" (click)="toggleVisibility(company.name)">
      {{company.visiblity}}
   </button>

TS

// Pass any unique field here to get required company
toggleVisibility(name: string) { 
  let company = this.companies.find(x => x.name === name);
  company.visibility = (company.visibility === 'visible') ? 'invisible' : 'visible';
}

You pass in a unique identifier of the company (Id, Name - if that's unique), you find that object in the array and update the value of 'visibility'.

Hope this helps,

Let me know if there are any issues, so we could update it for your needs.