ngmodel not populating input element value in jasmine test?

Question

I'm trying to run some test on a AngularComponent DetailCellComponent which I am hosting, for testing purpose inside a DetailCellHostComponent which is created on the fly during the test.

I test to make sure that that Component binding which supplies the value to the input element through [(ngModel)] is correctly populated with the proper value (see the jasmine test below), but nevertheless the input box value remains null. (This works fine when I run ng-serve and use the component in my application, just not in th test environment.)

Here is the template for DetailCellComponent.

<mat-form-field class="input-cell" [ngClass]='inputClass'
   *ngIf="hasRowFocus && (inputControlType==InputControlType.textInput  || inputControlType==InputControlType.selectInput )">

   <mat-label>{{fieldNameIndicator}}</mat-label>
   
   <!-- Form Field for enums  (currency selection)  -->
   <mat-select *ngIf="inputControlType == InputControlType.selectInput" [(ngModel)]="elValue" 
      (focusin)="focusIn()" 
      (focus)="gotInputFocus()" 
      (click)="inputClick($event)"
      (mouseover)="mouseover()"
      (mouseout)="mouseout()"
      [disabled]="readOnly"
      (blur)="lostInputFocus($event)"   #inputSelect
         (keydown)="inputKeyDown($event)"
         trackFocus>
      <mat-option *ngFor="let curr of currs" [value]=curr.key>
         {{curr.key}}       
      </mat-option>
   </mat-select>

   <!-- FormField for text and numbers -->
   <----------- This is the input element that's not working. -------------------->
   
    <input *ngIf="inputControlType != InputControlType.selectInput" 
     class="input-element textinput" matInput placeHolder="placeholder"
    [(ngModel)]="elValue"             <<--------------------This is not working...
   (focusin)="focusIn()" (focus)="gotInputFocus()" 
   (click)="inputClick($event)"
   [disabled]="readOnly"
   (blur)="lostInputFocus($event)" [errorStateMatcher]="matcher" #cellInput
      (keydown)="inputKeyDown($event)"
      trackFocus
   >
  <--------------------------------------------------------------->

 <mat-error>{{errorText}}</mat-error>
</mat-form-field>

<div tabindex=0 *ngIf="!hasRowFocus" class="display-cell" (keydown)="onSelectKeyDown($event)" 
                (click)=selectCellClick($event) (dblclick)=editRow($event)
                [ngClass]='selectClass'
                (mouseover)="mouseover()"
                (mouseout)="mouseout()"
                #cellSelect >
     <div (dragenter) = "mouseDragEnter($event)" (dragleave) = "mouseDragLeave($event)">{{elValue}}</div>
</div>

Here's the code for the test.

fdescribe('DetailCellComponent', () => {
  let fixture: ComponentFixture<DetailCellHostComponent>;
  let detailCellHostComponent: DetailCellHostComponent;
  
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      // declarations: [  DetailCellComponent],
      declarations: [DetailCellHostComponent, DetailCellComponent],
      providers: [CurrencyPipe]
    })
      .compileComponents()
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DetailCellHostComponent);
    detailCellHostComponent = fixture.componentInstance
  });
  
  it('change to row focus mode.', () => {
    fixture.detectChanges();
    let cellCommandSubject$ = detailCellHostComponent.commandSubject$;
    let evt = <CellCommandEvent>{};
    evt.eventType = CellCommands.SetToRowSelected;
    evt.target = FieldCol.all;
    cellCommandSubject$.next(evt);
    fixture.detectChanges();
    fixture.whenStable().then(() => {  // wait for async getQuote
      let cellComponentDE = fixture.debugElement.query(By.directive(DetailCellComponent));
      let cellComponent = cellComponentDE.componentInstance;
      expect(cellComponent).toBeTruthy();
      expect(cellComponent.elValue).toBe("100");    
      /** This test passes. 'elValue' is the binding property for the input element. **/
      let el : HTMLInputElement = cellComponentDE.query(By.css(".textinput")).nativeElement;
      expect(el).toBeTruthy();
      expect(el.value).toBe("100");
      /** This test fails.  The value property of the element is not populated by the
      *. [(ngModel)] directive.
    })

  });
});

Here's a picture of element depicted on the Karma test page when the test is stopped in the debugger as shown. as you can see, the input element is displaying the placeholder text instead of the model value.

How to fix this test?