CODEWITHSUNDEEP
htmlangulartypescript2.0
Виктория
Виктория

Reputation: 39

How to enable button by clicking another on Typescript?

I have 7 buttons. One of the is Edit Button. All except Edit must be disabled before smb click on it. How can i do this? I wanna to write one function for all button. Is it possible? I am new in AngularTs.

  <button class="btn btn-outline-primary " type="button">Edit</button>

    <button   class="btn btn-outline-primary " type="button">Assign</button>
    <button class="btn btn-outline-primary  " type="button">Start</button>
    <button class="btn btn-outline-primary " type="button">Resolve</button>
    <button class="btn btn-outline-primary " type="button">Ready for test</button>
    <button class="btn btn-outline-primary " type="button">ReOpen</button>
    <button class="btn btn-outline-primary " type="button">Close</button>

Upvotes: 0

Views: 1261

Answers (1)

Andrew Allen
Andrew Allen

Reputation: 8002

https://stackblitz.com/edit/angular-6dmgon

See stackblitz above.

For this I created a click event on the edit button.

  <button class="btn btn-outline-primary " (click)="changeEditable()" type="button">Edit</button>

    <button   class="btn btn-outline-primary " [disabled]="btnDisabled" type="button">Assign</button>
    <button class="btn btn-outline-primary  " [disabled]="btnDisabled" type="button">Start</button>
    <button class="btn btn-outline-primary " [disabled]="btnDisabled" type="button">Resolve</button>
    <button class="btn btn-outline-primary " [disabled]="btnDisabled" type="button">Ready for test</button>
    <button class="btn btn-outline-primary " [disabled]="btnDisabled" type="button">ReOpen</button>
    <button class="btn btn-outline-primary " [disabled]="btnDisabled" type="button">Close</button>

This changes btnDisabled which affects the button's in the template.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  btnDisabled = false;

  changeEditable() {
    console.log('changeEditable')
    this.btnDisabled = !this.btnDisabled;
  }
}

Upvotes: 2

Related Questions