Binding the values from response and make the checkboxes with those value using angular2

Question

I have 2 API, 1 API is used to hit for getting menu list. Another API is used for fetching the data with Values after saving the checked list. So based on data i must uncheck the boxes with value as 0 and check if value is 1.

Demo

TS:

getUserMenu() {
let data = [{HasCaseManagement: 1,HasDicom: 0,HasEMR: 1,HasHomeDashboard: 1,HasReport: 1,HasSystemSettings: 1,HasUserManagement: 0,Id: 54,UserId: 1387}]
        data.map(a => {
          this.userMenu.map(r => {
            if (r == a) {
              r.isChecked = true;
              this.selectedMenuIds.push(a)
              this.selectedMenuIds = this.userMenu.filter(x => x.isChecked).map(y => y);
            }
          })
        })
   }

Here the data is the response which I got from API, for that particular user. So that I can bind the check value if it is 1, uncheck if it is 0.

How to bind the values from the response and make the checkboxes with those value as using angular2?

Can you elaborate more? I don't see any problem in your demo. — Mukyuu, Jan 04 '19 at 08:50
in my demo, it is binding according to UserMenu, but i want that to get check and uncheck values based on the response got in getUserMenu — Bhrungarajni, Jan 04 '19 at 08:58

Mukyuu · Accepted Answer · 2019-01-04T09:13:27.427

I think you want something like in Stackblitz Fork

If that is the case, then you're missing:

 getUserMenu() {
    ...
    this.userMenu = data;
  }

  ngOnInit() {
    this.getUserMenu();
  }

You can read the explanation of ngOnInit() here and here

Summary:

A lifecycle hook that is called after Angular has initialized all data-bound properties of a directive. Define an ngOnInit() method to handle any additional initialization tasks.

More explanation about lifecycle hooks

Binding the values from response and make the checkboxes with those value using angular2

1 Answers1