Getting Access to the Template DOM with @ViewChild in Angular

<div class="col-md-9">
  <input type="text" class="form-control" trim #nickName />
</div>
<div class="row">
  <button class="btn" (click)="onAddGift(nickName)">Add Gift</button>
</div>

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Gift } from '../gift/gift.component';
 
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  @ViewChild('nickName') nickName : ElementRef;
  userNickName: String = '';
 
  ..
 
  onAddGift(nickName: HTMLInputElement) {
    ..
    this.userNickName = nickName.nativeElement.value;
    ..
  }
  
}

References
http://www.jcombat.com/angular-5/local-references-in-angular