My code in parent component initiates a pop up window using MatDailog and passes value to constructor in child component.

Code in Parent Component-
enter image description here

` this.dialog.open(ChildComponent, {
disableClose: false,
width: ‘700px’,
data: {
responseDetails: this.dataSourceTable,
changeStatus: ‘Open’,
header : this.headerName,
loader : true,
}

}
);`

Popup opens up and no data is visible but html shows no data. a variable is initialized in child component which is also not visible on UI.
code in Child component-
headingItem : string = "Blank Heading Item";

Code in constructor which initializes headingItem again:
constructor( @Inject(MAT_DIALOG_DATA) data: any,public dialogRef: MatDialogRef<ChildComponent>) { this.dataSource = data.responseDetails; this.headingItem = data.header; console.log("constructor data :",this.dataSource,this.headingItem); }

Code in HTML-
“

{{headingItem}}

”
“

static heading

”

Screenshot of result:
enter image description here

static heading is visible but “headingItem” is not visible , console shows no Error , and upon further investigation of ng Life cycle hooks, none of the life cycle hooks are called when we call fmea-Versioning component not even ngOnInit which is already a part of implementation. Only when we exit the pop up ngOnDestroy is called.