Issues Using *ngFor on Multiple Elements

Question

I'd like to show items from an array in a modal that displays after a button click inside a table.

HTML for the button:

<td class="col-xs-1 ">
  <button (click)="unshippedMaterialModalShow()">Show</button>
</td>

TS for the button:

  unshippedMaterialModalShow() {
    const modalContainer: any = document.getElementById('self-built-modal');
    modalContainer.style.display='block';
}

HTML for the modal:

<div
 id="self-built-modal"
 tabindex="-1"
 role="dialog"
 aria-labelledby="mySmallModalLabel"
 aria-hidden="true"
 onload="loadUnshippedMaterial(item.wtNumber)"
 >
 <div *ngFor="let item of dataModel.unshippedItems; let i = index">{{item.location}}</div>
 <div id="overlay"></div>
 <div id="modal-contents">
   <div id="modal-header">

      <button
        id="unshipped-modal-close"
        type="button"
        (click)="unshippedMaterialModalHide()"
        aria-label="Close"
      >
        <span aria-hidden="true">&times;</span>
      </button>
      <hr>
      Unshipped Material Modal
       {{item.wtNumber}}
    </div>
  </div>
</div>

Here is my DataModel component:

    customer: string;
    address: string;
    workPerformed: string;
    assignedTo: string;
    statusCode: string;
    steps: Array<any> = [];
    wts: Array<any> = [];
    subdivisions: Array<any> = [];
    orders: Array<any> = [];
    ordersLM: Array<any> = [];
    tracking: string;
    loaded: Array<any> = [];
    loadtech: Array<any> = [];
    salesorder: string;
    statusCodes: string;
    techid: string;
    statuscomment: string;
    newtracking: string;
    finaltracking: string;
    leadmanReport: Array<any> = [];
    redFlag: string;
    miscTech: Array<any> = [];
    unshippedItems: Array<any> = [];
}

Any code that I put inside of the div with the *ngFor statement doesn't show up on the modal. If I move it to be the parent container then I get a separate error: https://drive.google.com/file/d/1OvbX7Z8rbsy0Brdk1ey_SYNmbluO-ghl/view?usp=sharing

I have another modal on the page that uses an *ngFor statement that displays the information it's supposed to correctly but I was unsure if it affected this modal or not.

I'm not that familiar with Angular so I'm unsure if I'm doing anything incorrectly.

Any help is greatly appreciated and thank you in advance!

Answer 1

Any code that I put inside of the div with the *ngFor statement doesn't show up on the modal.

Both localtion and wtNumber do not appear in your data model.

If I move it to be the parent container then I get a separate error:

This error is mostly likely related to the method you are using to show the modal.

unshippedMaterialModalShow() {
  const modalContainer: any = document.getElementById('self-built-modal');
  modalContainer.style.display='block'; // 'style' here is causing the error
}

However, this is not the standard way to show a modal in Angular. Typically, this is done through an *ngIf binding.

TS

unshippedMaterialModalShow() {
  this.showModal = true;
}

HTML

<div
  id="self-built-modal"
  *ngIf="showModal" <!-- toggle 'showModal' variable to show/hide -->
  tabindex="-1"
  role="dialog"
  aria-labelledby="mySmallModalLabel"
  aria-hidden="true"
  onload="loadUnshippedMaterial(item.wtNumber)"
>