CODEWITHSUNDEEP
htmlangulartypescript
chv
chv

Reputation: 105

how to change button value on click

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);
  	}
  }
}

Upvotes: 0

Views: 813

Answers (4)

Vivek Doshi
Vivek Doshi

Reputation: 58523

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>

Upvotes: 1

Alex Ananjev
Alex Ananjev

Reputation: 279

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.

Upvotes: 0

axl-code
axl-code

Reputation: 2274

<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';
  }
}

Upvotes: 0

Nicolo L&#252;scher
Nicolo L&#252;scher

Reputation: 603

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>

Upvotes: 0

Related Questions