Enable disable buttons with Angular

Question

I m making an web-app in angular 4 and there is a question i came up with  It s the following   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     lt ul class  table lessonOverview  gt       lt li gt         lt p gt Lesson 1 lt  p gt         lt button  routerLink      lesson1               disabled    checkCurrentLesson1  class  primair  gt             Start lesson lt  button gt       lt  li gt       lt li gt         lt p gt Lesson 2 lt  p gt         lt button  routerLink      lesson2               disabled    checkCurrentLesson2  class  primair  gt             Start lesson lt  button gt       lt  li gt    lt  ul gt     I only printed two of the six lessons  but they are all the same   Has anyone an solution or idea for me   Thanks in advance   Maarten

User · Answer

export class ClassComponent implements OnInit     classes         name   string     level   string     code   number     currentLesson   1       checkCurrentLession current     this classes forEach  obj   gt       if obj currentLession    current         return true                 return false       lt ul class  table lessonOverview  gt           lt li gt             lt p gt Lesson 1 lt  p gt             lt button  routerLink      lesson1                   disabled   checkCurrentLession 1   class  primair  gt                 Start lesson lt  button gt           lt  li gt           lt li gt             lt p gt Lesson 2 lt  p gt             lt button  routerLink      lesson2                   disabled    checkCurrentLession 2   class  primair  gt                 Start lesson lt  button gt           lt  li gt        lt  ul gt

User · Answer

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     lt button   click   currentLesson    1             disabled   currentLesson      1   class  primair  gt             Start lesson lt  button gt     lt button  click   currentLesson    2             disabled   currentLesson      2   class  primair  gt             Start lesson lt  button gt          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   lt div  ngFor  let class of classes  let i   index  gt      lt button  disabled   currentLesson     i   1  class  primair  gt             Start lesson   i    1   lt  button gt   lt  div gt    Typescript  currentLesson string   classes         name   Lesson1     level  1    code  1        name   Lesson2     level  1    code  2         name   Lesson3     level  2    code  3       DEMO

User · Answer

lt div class  col-md-12  gt         lt p style  color   28a745  font-weight  bold  font-size 25px  text-align  right    gt Total Productos a pagar     getTotal         getResult     currency           lt button class  btn btn-success  type  submit   disabled    getResult     click   onSubmit    gt          Ver Pedido        lt  button gt        lt  p gt       lt  div gt

[javascript] Enable/disable buttons with Angular

Examples related to javascript

Examples related to angular

Examples related to typescript

Examples related to button