fix(popover-edit): Call markForCheck against row hover content when showing (#18258)

Author: kseamon

src/cdk-experimental/popover-edit/table-directives.ts

@@ -439,8 +439,10 @@ export class CdkRowHoverContent implements AfterViewInit, OnDestroy {
             if (!this.viewRef) {
               this.viewRef = this.viewContainerRef.createEmbeddedView(this.templateRef, {});
               this.initElement(this.viewRef.rootNodes[0] as HTMLElement);
+              this.viewRef.markForCheck();
             } else if (this.viewContainerRef.indexOf(this.viewRef) === -1) {
               this.viewContainerRef.insert(this.viewRef!);
+              this.viewRef.markForCheck();
             }
 
             if (eventState === HoverContentState.ON) {

src/components-examples/material-experimental/popover-edit/popover-edit-tab-out-mat-table/popover-edit-tab-out-mat-table-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {DataSource} from '@angular/cdk/collections';
 import {NgForm} from '@angular/forms';
 import {BehaviorSubject, Observable} from 'rxjs';
@@ -40,6 +40,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
   selector: 'popover-edit-tab-out-mat-table-example',
   styleUrls: ['popover-edit-tab-out-mat-table-example.css'],
   templateUrl: 'popover-edit-tab-out-mat-table-example.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PopoverEditTabOutMatTableExample {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];