add class to element in array using javascript

Question

problem statement: There is a bootstrap list-group. class "active" highlight the selected item from list-group. While loading the component (in angular), few list items should be pre selected, where I am facing issue.

HTML code as below:

            <div class="list-group" *ngFor="let role of roles | filter : searchText">
              <a id="{{role}}" class="list-group-item list-group-item-info list-group-item-action" (click)="selectRole(role)"> 
                {{ role }}
              </a>
            </div>

ts file as below:

roles = ["Admin", "Developer", "Tester", "Production Support", "Marketing", "Admin1", "Developer1", "Tester1", "Production Support1", "Marketing1", "2Admin", "2Developer", "2Tester", "2Production Support", "2Marketing"]
  selectedRoles = ["Developer", "Marketing"]

  userForm = this.fb.group({
    name: [''],
    roles: this.fb.array([])
  })

  ngOnInit( ): void {
    this.patchRole()
    console.log(this.userForm.value)
  }

  patchRole(){
    console.log('patch value')
    this.userForm.patchValue({roles: this.selectedRoles});
    let elements = document.getElementsByClassName('list-group-item')
    console.log(elements)
    for (let i=0; i<this.roles.length; i++){
      for (let j=0; j<this.selectedRoles.length; j++){
        if (this.roles[i] === this.selectedRoles[j]){
          elements[i].className += ' ' + "active"
        }
      }
    }
  }

Can you please help?

Paul · Accepted Answer · 2020-05-10 13:04:48Z

I would use ngClass for setting the right class to the list items.

See: https://stackblitz.com/edit/angular-ivy-qhzmeb

<div class="list-group" *ngFor="let role of roles">
    <a id="{{role}}" class="list-group-item list-group-item-info list-group-item-action" (click)="selectRole(role)"
        [ngClass]="{'active': isSelected(role) }">
        {{ role }}
    </a>
</div>

And then implement a function for checking whether the role is included.

export class AppComponent  {
  fb = new FormBuilder()
  roles = ["Admin", "Developer", "Tester", "Production Support", "Marketing", "Admin1", "Developer1", "Tester1", "Production Support1", "Marketing1", "2Admin", "2Developer", "2Tester", "2Production Support", "2Marketing"]
  selectedRoles = ["Developer", "Marketing"]

  userForm = this.fb.group({
    name: [''],
    roles: this.fb.array([])
  })

  ngOnInit( ): void {
    this.patchRole()
    console.log(this.userForm.value)
  }

  selectRole(role) {
    let pos = this.selectedRoles.indexOf(role);
    if (pos === -1) {
      this.selectedRoles.push(role);
    } else {
      this.selectedRoles.splice(pos, 1);
    }
  }

  isSelected(role) {
    return this.selectedRoles.includes(role);
  }

  patchRole(){
    console.log('patch value')
    this.userForm.patchValue({roles: this.selectedRoles});
  }
}

Collectives™ on Stack Overflow

add class to element in array using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related