Why are my selectedContent and selectedSummary not being displayed (blank)? The text inside the <p> tag is showing up instead.
<ng-template #modalTemplate>
<div class="scroll-container">
<div class="left-content">
<div class="scrollable-text" >
{{ selectedContent }}
<p>Lorem ipsum</p>
</div>
</div>
<div class="right-content">
<div class="scrollable-text">
{{ selectedSummary }}
<p>Lorem ipsum</p>
</div>
</div>
</div>
</ng-template>
In my .ts file, I have a method that opens a modal when clicking on inspect. In this method, I set the content and summary, pass it to my modalService which then appends the modal to the body and displays it.
onInspectTranscription(modalTemplate: TemplateRef<any>, content: string, summary: string) {
console.log('On inspect');
this.selectedContent = content;
this.selectedSummary = summary;
console.log('Content', this.selectedContent);
this.modalService
.open(modalTemplate, { size: 'lg', title: 'Foo' })
.subscribe((action) => {
console.log('modalAction', action);
});
}
I have also declared these two properties as follows:
selectedContent = 'NO CONTENT'; selectedSummary = 'NO SUMMARY';When I move everything outside of the ng-template, the selectedContent and selectedSummary are displayed, but inside the ng-template, only hard-coded strings show up.
I have tried several troubleshooting steps at this point. I checked my SCSS for any issues, looked for errors in the console, and verified that the properties are set with the correct values (if not, they should display default values).
THE COMPLETE HTML STRUCTURE
<app-page-layout>
<div class="content-layout">
<h1 id="page-title" class="content__title">Transcriptions</h1>
<div class="content__body">
<ul class="accordion">
<ng-container *ngFor="let item of transcriptions; let first = first">
<li class="accordion-list">
<div class="accordion-item" (click)="selectItem(item.id)">
<app-transcription [transcriptionItem]="item" [isChecked]="first"></app-transcription>
<i class='bx bx-chevron-right chevron-right-icon' *ngIf="item.id === selectedItemId"></i>
<!-------MENU------->
<div class="transcription-menu">
<div class="menu-item" (click)="onDeleteTranscription(item.id)">
<i class='bx bx-trash'></i>
<span>Delete</span>
</div>
<div class="menu-item" (click)="onInspectTranscription(modalTemplate, item.content, item.summary)">
<i class='bx bx-book-open'></i>
<span>Inspect</span>
</div>
</div>
<!------------------>
</div>
</li>
</ng-container>
</ul>
</div>
</div>
</app-page-layout>
<ng-template #modalTemplate>
<div class="scroll-container">
<div class="left-content">
<div class="scrollable-text" >
{{ selectedContent }}
<p>Lorem ipsum</p>
</div>
</div>
<div class="right-content">
<div class="scrollable-text">
{{ selectedSummary }}
<p>Lorem ipsum</p>
</div>
</div>
</div>
</ng-template>