Tengo una vista html simple donde se ingresa un número de pedido, pero no puedo obtener el valor del cuadro de texto en el evento onClick

HTML

 <div class="row"> <div class="col-lg-12"> <nb-card> <nb-card-header>Place Order</nb-card-header> <nb-card-body> <input type="text" id="txtOrderNumber" nbInput fullWidth placeholder="Order Number"> <div class="full-name-inputs"> <input nbInput fullWidth placeholder="Date Placed" [nbDatepicker]="datePlaced"> <nb-datepicker #datePlaced></nb-datepicker> <input nbInput fullWidth placeholder="Date Expected" [nbDatepicker]="dateExpected"> <nb-datepicker #dateExpected></nb-datepicker> </div> <input type="text" nbInput fullWidth shape="rectangle" placeholder="Supplier"> <input type="text" nbInput fullWidth shape="semi-round" placeholder="Unit"> <input type="text" nbInput fullWidth shape="round" placeholder="Quantity"> <input type="text" nbInput fullWidth placeholder="Total Amount" disabled/> <textarea rows="5" nbInput fullWidth shape="round" placeholder="Order Description"></textarea> <button (click)="ShowRawMaterials()" nbButton>Click Me</button> </nb-card-body> </nb-card> </div> </div>

Mecanografiado

 import { Component } from '@angular/core'; import { NbDateService } from '@nebular/theme'; /*import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';*/ @Component({ selector: 'ngx-form-inputs', styleUrls: ['./place-order.component.scss'], templateUrl: './place-order.component.html', }) /*export class PlaceOrderComponent implements AfterViewInit { @ViewChild('txtOrderNumber') txtOrderNo: ElementRef;*/ export class PlaceOrderComponent { starRate = 2; heartRate = 4; radioGroupValue = 'This is value 2'; min: Date; max: Date; constructor(protected dateService: NbDateService<Date>) { this.min = this.dateService.addDay(this.dateService.today(), -5); this.max = this.dateService.addDay(this.dateService.today(), 5); } ShowRawMaterials() { var inputValue = (<HTMLInputElement>document.getElementById(txtOrderNo)).value; alert(inputValue); } }