Enable/disable buttons with Angular

Question

I'm making an web-app in angular 4. I use a property called currentLesson. This property has a variable number from 1 to 6. In my component I have an list of 6 lessons where each lesson has it's own button to start this lesson.

In this list it should only be available to click the button when the currentLesson has the value of the number of the lesson:

Button of lesson 1 is active when : currentLesson = 1

Button of lesson 2 is active when : currentLesson = 2

Etc. etc.

So if currentLesson = 2, the buttons of lesson 1, 3, 4, 5 and 6 should be disabled.

I have the following set-up but it doesn't seem to work. In my component i have:

export class ClassComponent implements OnInit {
  classes = [
{
  name: 'string',
  level: 'string',
  code: 'number',
  currentLesson: '1'
}]



checkCurrentLesson1 = function(classes) {
if (classes.currentLesson = 1) { 
 return true;
}
else {
 return false;
}
};

checkCurrentLesson2 = function(classes) {
if (classes.currentLesson = 2) {
 return true;
}
else {
 return false;
}
};

And my html file is like this:

 <ul class="table lessonOverview">
    <li>
      <p>Lesson 1</p>
      <button [routerLink]="['/lesson1']" 
         [disabled]="!checkCurrentLesson1" class="primair">
           Start lesson</button>
    </li>
    <li>
      <p>Lesson 2</p>
      <button [routerLink]="['/lesson2']" 
         [disabled]="!checkCurrentLesson2" class="primair">
           Start lesson</button>
    </li>
 </ul>

(I only printed two of the six lessons, but they are all the same)

What's the solution?

Vega · Accepted Answer · 2019-04-02 15:24:28Z

41

Set a property for the current lesson: currentLesson. It will hold, obviously, the 'number' of the choosen lesson. On each button click, set the currentLesson value to 'number'/ order of the button, i.e. for the first button, it will be '1', for the second '2' and so on. Each button now can be disabled with [disabled] attribute, if it the currentLesson is not the same as it's order.

HTML

  <button  (click)="currentLesson = '1'"
         [disabled]="currentLesson !== '1'" class="primair">
           Start lesson</button>
  <button (click)="currentLesson = '2'"
         [disabled]="currentLesson !== '2'" class="primair">
           Start lesson</button>
 .....//so on

Typescript

currentLesson:string;

  classes = [
{
  name: 'string',
  level: 'string',
  code: 'number',
  currentLesson: '1'
}]

constructor(){
  this.currentLesson=this.classes[0].currentLesson
}

DEMO

Putting everything in a loop:

HTML

<div *ngFor="let class of classes; let i = index">
   <button [disabled]="currentLesson !== i + 1" class="primair">
           Start lesson {{i +  1}}</button>
</div>

Typescript

currentLesson:string;

classes = [
{
  name: 'Lesson1',
  level: 1,
  code: 1,
},{
  name: 'Lesson2',
  level: 1,
  code: 2,
},
{
  name: 'Lesson3',
  level: 2,
  code: 3,
}]

DEMO

edited Apr 2, 2019 at 15:24

answered Sep 24, 2017 at 12:56

Vega

28.8k28 gold badges121 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maarten Over a year ago

Thanks, clear as water now! I also have a question about setting the property 'currentLesson' + 1 when an other button is clicked in an other component, but maybe its the best that i'll make a new question for it.

Gene · Accepted Answer · 2021-06-18 04:24:43Z

1

my.component.html:

<button [disabled]="isSubmitBtnDisabled" (click)="addGame()">Send</button>

my.component.ts:

export class My implements OnInit {
  isSubmitBtnDisabled: boolean= false;

   private someMethodYouCalled() {
      this.isSubmitBtnDisabled = true;   //Controls if button is disabled
   }
}

answered Jun 18, 2021 at 4:24

Gene

11.4k1 gold badge69 silver badges59 bronze badges

Comments

Surya Prasad Khanal · Accepted Answer · 2017-09-24 12:59:05Z

export class ClassComponent implements OnInit {
  classes = [
{
  name: 'string',
  level: 'string',
  code: 'number',
  currentLesson: '1'
}]


checkCurrentLession(current){

 this.classes.forEach((obj)=>{
    if(obj.currentLession == current){
      return true;
    }

  });
  return false;
}


<ul class="table lessonOverview">
        <li>
          <p>Lesson 1</p>
          <button [routerLink]="['/lesson1']" 
             [disabled]="checkCurrentLession(1)" class="primair">
               Start lesson</button>
        </li>
        <li>
          <p>Lesson 2</p>
          <button [routerLink]="['/lesson2']" 
             [disabled]="!checkCurrentLession(2)" class="primair">
               Start lesson</button>
        </li>
     </ul>

Felipe Clemente · Accepted Answer · 2020-06-04 16:55:34Z

0

    <div class="col-md-12">
      <p style="color: #28a745; font-weight: bold; font-size:25px; text-align: right " >Total Productos a pagar= {{ getTotal() }} {{ getResult() | currency }}
      <button class="btn btn-success" type="submit" [disabled]="!getResult()" (click)="onSubmit()">
        Ver Pedido
      </button>
     </p>
    </div>

answered Jun 4, 2020 at 16:55

Felipe Clemente

671 silver badge3 bronze badges

1 Comment

AmazingTurtle Over a year ago

You should provide an explanation as well. Only pasting a code block results in people copy-pasting the code without understanding it.

Collectives™ on Stack Overflow

Enable/disable buttons with Angular

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related