Traversing DOM to remove class using typescript

Question

I need an help with navigating to a element in a table. The html looks like below,

<table role="grid">
    <thead class="ui-table-thead">...</thead>
    <tbody class="ui-table-tbody" ng-reflect-columns="[object Object],[object Object" ng-reflect-template="[object Object]">...</tbody>
    <tr tabindex="0" class="ui-selectable-row ng-star-inserted ui-state-highlight" ng-reflect-data="[object Object]">...</tr>
</table>

This is my code to navigate:

if(this.table){
    console.log(this.table.tableViewChild.nativeElement);
    let element = this.table.tableViewChild.nativeElement.children;
    for(let key in element){
        if ((element[key].classList).contains('ui-table-tbody')) {
            (element[key].classList).remove('ui-state-highlight');
          }
    }
}

The above code doesnt help.I dont see any change. Can someone please let me know how to remove the foll. class dynamically 'class="ui-state-highlight"'.Thanks in advance. any leads please?

The thing is that you're checking an element that contains `ui-table-tbody` class but not `ui-state-highlight` so based on the information and code snippets you gave there's nothing wrong with having nothing happening. Or should your `tbody` element contain `ui-state-highlight` class at some point ? — Romuald, Oct 09 '20 at 12:48
@Romuald yes thats right. tbody doesnt have 'ui-state-highlight'. Its the tr element which holds the 'ui-state-highlight' class. So how do i traverse to tbody then tr and find the class? — Geek, Oct 09 '20 at 12:54
Why wouldn't you simply check if `(element[key].classList).contains('ui-state-highlight')` ? — Romuald, Oct 09 '20 at 13:32
@ Romuald I tried and got this error. ERROR TypeError: Unable to get property 'contains' of undefined or null reference — Geek, Oct 09 '20 at 13:38
How do you declare `this.table`? Are you getting the whole table/`tableViewChild` by Angular's `ViewChild`? — Aleks Grunwald, Oct 09 '20 at 13:58

score 1 · Answer 1 · answered Oct 09 '20 at 16:09

If you are using @ViewChild to declare a table:

An element declared by @ViewChild is only available after the view is initialized and this happens in ngAfterViewInit.

So try to put your function in ngAfterViewInit Angular Lifecycle Hook.

More about this topic: Angular 2 @ViewChild returns undefined

Aleks Grunwald · Answer 2 · 2020-10-09T16:53:29.193

Also, I would would just use searching by a class name, but since you are using Angular, it would be proper to search only in the component, not the whole DOM.

Check this question/answers:

Angular2 retrieve all elements with class name

So, I would try to follow @Paritosh answer and do sth like this:

Inject ElementRef in the constructor:

constructor(private renderer: Renderer, private elem: ElementRef){}

and then

Use ngAfterViewInit:

ngAfterViewInit() {
    let elements = this.elem.nativeElement.querySelectorAll('.ui-table-tbody');
    for (let elem of elements) {
        elem.classList.remove('ui-state-highlight')
    }
}

Traversing DOM to remove class using typescript

2 Answers2