Local References in Angular

Note that we can only access local references in template, not on TypeScript code

<div class="col-md-9">
  <input type="text" class="form-control" trim #giftName />
</div>
<div class="row">
  <button class="btn" (click)="onAddGift(giftName)">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 {
  userNickName: String = '';
 
  ..
 
  onAddGift(giftName: HTMLInputElement) {
    this.userGiftName = giftName.value;
    ..
    ..
  }
  
}

There is another way to do this using @ViewChild decorator.

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