I have a simple html view where an order number is entered but I am failing to get the value of the textbox in the onClick event

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>

Typescript

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);
        }
}