How can I access DOM elements in angular

Question

I am tetsing a template driven form in angular, just testing not validating it. I have read that it can be done using a viewChild property but it seems to not work for me.

I create a reference like this in my one of my forms label:

<label #ref  id=.. class=...>

And now in my component I do this:

@ViewChild('ref') ref:ElementRef;

So, I suppose I created a valiable of type ElementRef that is viewChild of my input. So now I can use ref in my tests.

Inside my tests I do this:

let ref: HTMLElement:

it(....=>
{
ref = fixture.debugElement.query(By.css('ref')).nativeElement;
fixture.detectChanges();
expect(ref.innerHTML)toContain('Name');// or whatever
}

)

Now consider that the test, html and component files are separated from one another.

I still get errors of nativeElemnt property cannot be read. eventhough I have imported ElemntRef.

Is this the right way to access the DOM elemnts?? Or this viewChild doesnt make a referece to my label??

And again can I use the ID to access the form elements? What I have read they use a reference with #.

Thanks!!

Solution

For direct access to DOM in Angular you can make judicious use of ElementRef

However Direct access to DOM elements is not a good practice because it leaves you vulnerable to XSS attacks.

---

Your AppComponent

import {Component, ElementRef} from '@angular/core';

@Component({
    selector: 'my-app'
})
export class AppComponent implements ngOnInit {

constructor(private _elementRef : ElementRef) { }

ngOnInit(): void
{
  this.ModifyDOMElement();
}

 ModifyDOMElement() : void
 { 
   //Do whatever you wish with the DOM element.
   let domElement = this._elementRef.nativeElement.querySelector(`#someID`);
 } 
}

Your HTML

<p id="someID"></p>

Comments

[Tester]

And how to access it on a test class??

[Kunal Mukherjee]

Just import ElementRef by import { ElementRef } from '@angular/core'; in your test class and inject it into the constructor like constructor(private _elementRef : ElementRef) { }.

[Tester]

In my testing class that is a different file from my appcomponnet I should do this: it().... expect (comp.domElement)toContain(...)?

[Kunal Mukherjee]

Have you tried importing ElementRef in your test class?

[Tester]

Yes I imported it. NOW HOW CAN i TEST IT? What you showed to me is how to access it in my appComponent

[Kunal Mukherjee]

You can do the same in your unit test for what I showed in the app component, where you get access to the complete DOM element.

[Tester]

domElement in thi case is an HTMLEelemnt??

[Kunal Mukherjee]

Yes its a HTMLElement type

[Tester]

Heyy! Thanks my friend, but when I print in the test class console.log(comp.domElement) it gives me undefined. I have previously in my test class: fixture = TestBed.createComponent(JhiLoginModalComponent); comp = fixture.componentInstance;