MatDialog not displaying HTML tags with injected data

Question

As shown in the added images, it does render the second component but the text is blank.

It is getting the injected data as shown by it outputting in the console. I have also tried this same code in another blank angular project that doesn't have much and it works over there. I have been trying to solve this for the last few days and nothing has worked. Have found EntryComponents but it doesn't exist on Angular 17. Also tried NgZone which also didn't work. If I add the injected code with Hello World text, that also disappears and doesn't show any text even though it is hard-coded text.

Pop Up Component.html

<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
<h1>Hello World</h1>
<h2>{{name}}</h2>

PopUpcomponent.ts

import { Component, Inject } from '@angular/core';
import {
  MAT_DIALOG_DATA
} from '@angular/material/dialog';

@Component({
  selector: 'app-pop-up-component',
  templateUrl: './pop-up-component.component.html',
  styleUrl: './pop-up-component.component.scss',
})
export class PopUpComponent {
  name: any;
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
    this.name = data.name;
    console.log('popupcomponent ' + this.name);
  }

  ngOnInit() {
    console.log(this.name);
  }
}

Main Component HTML

<div class="row">
       <button class="btn" (click)="openDialog()">Open Dialog</button>
</div>

Main Component TS

import { HttpClient } from '@angular/common/http';
import { Component, NgZone, OnInit } from '@angular/core';
import { DataService } from '../Services/data.service';
import { LoginServiceService } from '../Services/login-service.service';
import {
  MatDialog,
  MatDialogRef,
} from '@angular/material/dialog';
import { PopUpComponent } from '../pop-up-component/pop-up-component.component';

@Component({
  selector: 'app-main-component',
  templateUrl: './main-component.component.html',
  styleUrls: ['./main-component.component.scss'],
})
export class MainComponent implements OnInit {
  constructor(
    private login: LoginServiceService,
    private http: HttpClient,
    private dataService: DataService,
    private dialogRef: MatDialog,
  ) {}
openDialog() {
   this.dialogRef.open(PopUpComponent, {
    data: {
      name:'artist'
    }
   })
  }
}

Any Help would be much appreciated.