angular4 viewchild not working on dom element

Question

i want to know how to fetch the dom element from a components template :

Component

export class JokeListComponent implements OnInit, AfterViewInit {


  jokes: Joke[];
  constructor() { }
  @ViewChild('.myclass') el:  ElementRef;

  ngOnInit() {

    this.jokes = [
      new Joke('joke1', 'content1'),
      new Joke('Joke2', 'content2'),
      new Joke(),
    ];

  }

  ngAfterViewInit(): void {
    console.log(this.el);
  }
}

View

<div class="card">
    <div class="card-block">
        <h4 class="card-title"> New Joke Form </h4>

        <div class="myclass">

        </div>

        <div class="form-group">
            <label for="jokeHeader">Joke Header</label>
            <input type="text" id="jokeHeader" class="form-control" placeholder="Joke Head" #jokeHead>
        </div>

        <div class="form-group">
            <label for="jokeContent">Joke Header</label>
            <input type="text" id="jokeContent" class="form-control" placeholder="Joke Content" #jokeContent>
        </div>

        <button class="btn btn-primary" (click)="addJoke(jokeHead.value, jokeContent.value)"> Validate </button>

    </div>
</div>

<hr>

<joke *ngFor="let joke of jokes" [joke]="joke" (deleteEvt)="deleteJoke($event)"></joke>

the problem is that this.el is always undefined, i dont know why.

PS: i'm using the last version of angular 4

Answer 1

You cannot use the class name for the @ViewChild, you will need a local variable:

@Component({
      template: `
      <div><span #myVar>xxx</span><div>`
    })
    class MyComponent {
      @ViewChild('myVar') myVar:ElementRef;

      ngAfterViewInit() {
        console.log(this.myVar.nativeElement);
      }
    }