Angular 6 - @ViewChild Access value of nativeElement span class

Question

I am using @ViewChild is Angular.

On my app.component.html I have:

<div #somename>Mark<span class="somethingelse">Hello something else</span></div>

And on my app.component.ts

@ViewChild('somename') SomeName;

  constructor() {}

  getInputValue() {
 alert(this.SomeName.nativeElement('span').getElementByClassName('somethingelse').innerHTML);
  }

This is not returning anything.

My question is how to I target the span's class and get it's value?

Answer 1

Your view child should be:

@ViewChild("somename") somename: ElementRef;

Then you can do:

this.somename.nativeElement.firstElementChild.innerHTML

Answer 2

<div>Mark<span class="somethingelse" #somename>Hello something else</span></div>

@ViewChild('somename') mySpan: ElementRef;
ngAfterViewInit() {
  console.log(this.mySpan.nativeElement.innerHTML);
}