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