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

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">&times;</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;
      }
    });  
  }

Your condition is wrong. It will not render the data because of isActive flag set to true and the template will only render when the isActive flag is false. — Anto Antony
– Anto Antony, Commented Nov 27, 2019 at 15:24
@ppgowda4 yes when is value is true i want to show the names — Luis Luis Maia Maia
– Luis Luis Maia Maia, Commented Nov 27, 2019 at 15:28

Anto Antony · Accepted Answer · 2019-11-29 10:41:15Z

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>

edited Nov 29, 2019 at 10:41

answered Nov 27, 2019 at 15:29

Anto Antony

8826 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ppgowda4 · Accepted Answer · 2019-11-27 15:33:50Z

0

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>

answered Nov 27, 2019 at 15:33

ppgowda4

4183 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related