Use an HTMLInputElement type ElementRef instead of an HTMLElement type ElementRef to get at the value of a form field or to set the readonly state in an Angular 7 application.

Following up on this, I offer this example:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { YinYang } from './yinyang.model';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   @ViewChild('yin') yin: ElementRef<HTMLInputElement>;
   @ViewChild('yang') yang: ElementRef<HTMLInputElement>;
   constructor() { }
   act(){
      if (this.yin.nativeElement.readOnly) {
         this.yin.nativeElement.readOnly = false;
         this.yang.nativeElement.readOnly = false;
      } else {
         let yinYang = new YinYang();
         yinYang.Yin = this.yin.nativeElement.value;
         yinYang.Yang = this.yang.nativeElement.value;
         this.yin.nativeElement.readOnly = true;
         this.yang.nativeElement.readOnly = true;
      }   
   }
}