Local References in Angular

Last Updated on February 16, 2022 by Pupli

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 class="row">
  <button class="btn" (click)="onAddGift(giftName)">Add Gift</button>
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Gift } from '../gift/gift.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.