Better way to access DOM class or id using typescript

Question

I am trying to clean up all jQuery related things in my application. While I was doing that I was in a confusion to use between javascript methods and angular native methods. So I need some clarifications for my below codes.

With jQuery to add and remove class dynamically:

$('.my-class').removeClass('list-hide').addClass('list-show');

In Javascript:

 var element = document.getElementByClassName('.my-class');
 element.classList.remove('list-hide');
 element.classList.add('list-show');

Using TypeScript:

  const element = this.elemRef.nativeElement.querySelector('.my-class');
  element.classList.remove('list-hide');
  element.classList.add('list-show');

The thing is I have many scenarios as above to access by DOM Id's and class names. And If I go by ElementRef I may end up in writing this.elementRef.nativeElement many times. Also In the official documentation it is said that - ' if direct access to native elements is not supported, use Render2' with a caution notice.

So kindly help me with better ways to access DOM elements without more repetition and jQuery from my Angular application.

You can use Jquery from your angular project. refer this [https://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular][1] — Mukesh, Apr 05 '19 at 14:16
@Mukesh The question is about getting rid of jQuery, not adding it — sloth, Apr 05 '19 at 14:17
@Onera You know that you can still simply use `document.getElementByClassName` in typescript, right? — sloth, Apr 05 '19 at 14:18
@sloth Yes i know i can use as the way I did in javascript but would like to know may be there are other ways to dynamically access DOM — Onera, Apr 05 '19 at 14:21
What do you want to achieve? You can use `[ngClass]` attribute with a flag (a boolean property like `isOpen`) at component, or you can create custom components for the elements. But that really depends on what you need. So it is hard to say what fits best in your situation. — Harun Yilmaz, Apr 05 '19 at 14:23
*"what's better"* is really an opinion based question and thus off topic on SO — charlietfl, Apr 05 '19 at 14:25
@HarunYılmaz One such scenario is I have to remove set of classes and inject other classes for a particular div. I agree ngClass is good idea but its not advisable if you have many such scenarios — Onera, Apr 05 '19 at 14:26
If there are so much of the same thing, it doesn't sound right. You need to divide&conquer then, I think. And I also think that you should be in full control of what is on the DOM and what will happen when events occur. That's why Angular discourages the use of direct DOM modifications in my opinion. — Harun Yilmaz, Apr 05 '19 at 14:28
Based on this sample you are showing, I would advise to use `[ngClass]` like suggested further up. Whatever "much of the same thing" means, can't comment on that... — AT82, Apr 05 '19 at 18:57

tracer · Accepted Answer · 2019-04-08T13:48:11.373

As far I understand going with ngClass would be easier for dynamically adding and removing class. If you are targeting to a particular class and want to perform add or remove class dynamically, you could do something like below:

In ts:

filterBy:string = '';

selectedItemCode(field){
  this.filterBy = field;
}

In html:

 <div (click)="selectedItemCode('random1')">Example-One</div>
 <div (click)="selectedItemCode('random2')">Example-two</div>

 <section class="my-class" [ngClass]="filterBy === 'random1'? 'list-show' : 'list-hide'">
 </section>

And to answer the question related to repetition of elemRef.nativeElement.querySelector('my-class'):

use a ngAfterViewInit life cycle hook like below:

export class SomeComponent {
  public element;

  constructor(private elemRef: ElementRef){}

  ngAfterViewInit(){
    this.element = this.elemRef.nativeElement;
  }

}

After this you can use this.element.querySelector directly to access DOM elements

thanks for the reply. Good thought. I was just behind from adding a method and accessing the classes dynamically. Thanks man:) — Onera, Apr 08 '19 at 13:51

Better way to access DOM class or id using typescript

1 Answers1