Send array from modal component to previous component and show result - Angular - arrays

Question

Problem: I have a button in a form that opens a modal window(a component). In this modal window the user selects the files he wishes to upload. After the clicks in button submit in the modal window. It closes the modal and stays in the previous component. I need to take the name of the files selected to the previous component and show to the user.
The modal html
In here i have the modal html where the user selects which files he wants to upload.
After that he clicks in submit and is sending the names of the files to an array.
<div class="modal-dialog modal-lg">
<div class="modal-header">
<h4 class="modal-title">Selecionar Assets</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group text-center">
<input type="file" name="image" (change)="onSelectFile($event)" multiple />
</div>
<div class="row">
<div class="col">
<p class="text-center h4">Asset</p>
</div>
<div class="col">
<p class="text-center h4">Name</p>
</div>
</div>
<div class="row" *ngFor='let url of urls let i = index'>
<div class="col">
<div class="text-center image-preview img-responsive mb-3">
<img [src]="url" height="100" width="100"/>
</div>
</div>
<div class="col trimText">
<div class="text-center mb-3">
<p class="text-center"> {{ names[i] }}</p>
</div>
</div>
</div>
<div class="form-group text-center">
<button class="btn btn-primary" (click)="onSubmit(); activeModal.dismiss('Cross click')">Submit</button>
</div>
</div>
</div>
The modal component.ts
In here I'm iterating over the multiple files the user selected and get the name of those files.
When clicked on the button submit i send that array to the component that opens the modal.
#Input() names:Array<string> = [];
#Output() namesEntry: EventEmitter<string[]> = new EventEmitter();
onSelectFile(event) {
if (event.target.files && event.target.files[0]) {
var filesAmount = event.target.files.length;
for (let i = 0; i < filesAmount; i++) {
this.names.push(event.target.files[i].name);
var reader = new FileReader();
reader.onload = (event:any) => {
this.urls.push(event.target.result);
}
reader.readAsDataURL(event.target.files[i]);
}
console.log(this.names);
}
}
onSubmit() {
//send to form name of the assets
this.activeModal.close(this.names);
}
The form html
In this part of the component is where I want to show the name of the files that i had in the modal. The problem is that is never showned, even and the array names is not empty and the isActive is true
<div id="assets" class="text-center" *ngIf="isActive; else notActive">
<ng-template #notActive>
<div *ngFor='let name of names'>
<p class="h6">{{name}}</p>
</div>
</ng-template>
</div>
The form component.ts
Here is where I retrieve the array of names from the modal to this component and when i do console.log of this.names return the array with the names and this.isActive returns true.
names:Array<string> = [];
isActive = false;
constructor(private modalService: NgbModal) {}
open() {
const modalRef = this.modalService.open(AssetComponent, {size:"lg", backdrop: 'static'});
modalRef.componentInstance.title = 'asset';
modalRef.result.then((result) => {
if (result) {
this.names = result;
this.isActive = true;
}
});
}

Answer 1

Please change the code to following.
<div id="assets" class="text-center" *ngIf="isActive">
<div *ngFor='let names of names'>
<p class="h6">{{name}}</p>
</div>
</div>
Your condition was wrong. It will not render the data because of isActive flag set to true and template was set to render when the isActive flag is false.
Keep in mind, Template(<tempalte #ref></template>) inside the *ngIf will only available when the condition is met.
For example,
<div *ngIf="test else nodData">
Data Available
<template #nodData>No Data available</template>
</div>
Template nodData will not be available unit the ngIf condition met. So the noData wont display. So always keep the ref outside ngIf block for else conditions
<div *ngIf="test else nodData">
Data Available
</div>
<template #nodData>No Data available</template>

Answer 2

Please update your template to render correctly,
In *ngIf condition, template should be outside the condition element
<div id="assets" class="text-center" *ngIf="isActive; else notActive">
<div *ngFor='let names of names'>
<p class="h6">{{name}}</p>
</div>
</div>
<ng-template #notActive>
// Your message or code
</ng-template>