show value in html page with model after create that

i need to show information in html .

my information have 2 part :

Part One : pass information form local ( not send a request from server )

Part Tow : maybe need to send id and get information and show it in html .

when i click to show detail of information it show me part one in html and part tow is null , beacuse fill model after create the html .

how can i show Part tow when model is fill after create the html or any way to show Part tow?????

this is my ts code :

export interface DetailModel {
  commentText: string;
  createdByRefId: number;
  createdDateTimePersian: string;
  createdOnUtc: string;
  createdUserFullName: string;
  id: number;
  likeCount: number;
  parentId: number;
  postId: number;
  postTitle: string;
  published: boolean;
  updatedByRefId: number;
  updatedDateTimePersian: string;
  updatedOnUtc: string;
  updatedUserFullName: string;
}

@Component({
  selector: 'kt-detail-comment',
  templateUrl: './detail-comment.component.html',
  styleUrls: ['./detail-comment.component.scss']
})
export class DetailCommentComponent implements OnInit {


  parentComment: CommentEdit;
  childModel: DetailModel = {} as DetailModel;
  parentModel: DetailModel = {} as DetailModel;

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: CommentDetail,
    private defChange: ChangeDetectorRef,
    private dialogRef: MatDialogRef<DetailCommentComponent>,
    private shredService: SharedService) {
    this.childModel = this.data.data;
    if (this.childModel.parentId != null) {
      this.fetchData(this.data.data.parentId);
    }
  }

  ngOnInit(): void {

  }


  fetchData(id: number): void {
    this.shredService.commentGetOne(id).subscribe(data => {
      this.parentModel = data;
    });
  }

  close(): void {
    this.dialogRef.close();
  }

}