Cannot get element from id inside an Angular Modal

Question

I'm new to the AngularJS and having a problem loading up data with element ID. I've checked I can print out any text value to the modal already but again, text data with element ID isn't working. Any idea?

list.component.html

<a mat-flat-button color="accent" (click)="openDialog()" href="/details/{{element._id}}" target="_blank" class="fctButton">View Details</a>

list-component.ts

    import * as moment from "moment";
    import { Observable } from "rxjs";
    import { APIService } from "../../services/api.service";
    import { CSVService } from "../../services/csv.service";
    import { FormControl } from "@angular/forms";
    import { map, startWith } from "rxjs/operators";
    import { Component, OnInit } from "@angular/core";
    import { Router, ActivatedRoute } from "@angular/router";
    import { TooltipPosition } from "@angular/material/tooltip";
    import { MatSnackBar } from "@angular/material/snack-bar";
    import { MatDatepickerInputEvent } from "@angular/material/datepicker";
    import { MatDialog } from "@angular/material/dialog"; // Dialog
    import { DetailElementComponent } from "../details/detail/detail-element/detail-element.component";
    
    @Component({
      selector: "app-list",
      templateUrl: "./list.component.html",
      styleUrls: ["./list.component.sass"],  template: "{{element}}",
})
export class ListComponent implements OnInit {

  constructor(
    private api: APIService,
    private csvService: CSVService,
    private router: Router,
    private route: ActivatedRoute,
    private _snackBar: MatSnackBar,
    // public dialog: MatDialog,
    public dialog: MatDialog,
    @Inject(MatDialog) public data: { }
  ) {}
    
      openDialog() { // Dialog
        this.dialog.open(DetailElementComponent);
      }

detail-element.compoenent.html

    <div *ngIf="isLink(element); then link else notLink"> </div>
    <ng-template #link>
        <a target="_blank" href="{{element}}"> {{ element }} </a>
    </ng-template>
    <ng-template #notLink>
        {{ element }} **// This line won't print on the Modal popup**
        Hello **// Now this line will be print without any problem**
    </ng-template>

detail-element.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';


    
    @Component({
      selector: 'app-detail-element',
      templateUrl: './detail-element.component.html',
      styleUrls: ['./detail-element.component.sass']
    })
    export class DetailElementComponent implements OnInit {
    
      constructor() {}
    
      @Input() element: any;     // data to display
    
      ngOnInit(): void {
      }
    
      isLink(item): boolean {
        return typeof item === 'string' && item.includes('http') && !item.includes(' ');
      }
    }