Is there a way to create numerous div elements in real-time when a click event occurs?

Question

Is there a way to create numerous div elements in real-time when a click event occurs?

I've created a web application that requires the user to input a product number. Adjacent to the input field is an arrow icon that the user clicks. Upon clicking, there is validation to ensure that the entered number matches one of the valid product numbers stored in an array. If it's a match, a div containing information related to that product should be displayed and populated.

If the user enters the same number again and clicks the arrow, the same div should appear beneath the existing one. If a different valid number is entered, a new div with the corresponding product info should show up below the previous div. In case of an invalid number entry, an error message indicating the invalid input should be displayed without generating another div.

Currently, I'm using a show-hide method in my HTML file to display or hide the div based on the validity of the input number. However, I would like to generate multiple divs if the number is valid (as shown in the transactionDetails div below). I am wondering how I can achieve this functionality?

Below is a snippet of my HTML code:

<input class="numberInput" formControlName="ProductNumber" type="number" placeholder="{{'EnterNumber' | translate}}" [ngClass]="displayErrors ? 'inputRedBorder': 'input'" style="width:150px !important;"/>

    <span (click)="validateNumber()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 8 8" style="vertical-align: middle;">
            <path d="M5 0v2h-5v1h5v2l3-2.53-3-2.47z" transform="translate(0 1)" />
        </svg>
    </span>

  <div class="transactionDetails grid" *ngIf="showResults">
    <!-- Product details here -->
</div>

And here's my validate function:

listOfValidProductNumbers = [ 
  3097165,
  6100256,
  6124380,
  2177422,
  3795377,
  6097961,
  3808804,
  6110164,
  1705466]; 

validateSKU() 
{
   const productNumber = this.transactionForm.get('ProductNumber').value;

    if (this.listOfValidProductNumbers.indexOf(productNumber) > -1 ) {
      this.showResults = true;
    } else {
      this.showResults = false;
    }
}

angular typescript

Answer 1

Answer №1

If you're looking for a solution, I recommend the following approach.

Start by creating an array of products in your TypeScript file like this:

private products: Array<product> = [];

Whenever your validation passes, add the new product to the array using the following code snippet:

validateSKU() {
   const productNumber = this.transactionForm.get('ProductNumber').value;

   if (this.listOfValidProductNumbers.indexOf(productNumber) > -1 ) {
      this.products.push(product);
      this.showResults = true;
   } else {
      this.showResults = false;
   }
}

In your HTML template, you can use *ngFor to display the contents of the array dynamically. As you add new products, Angular will automatically update the list. Here's an example:

<div class="transactionDetails grid" *ngIf="showResults">
   <div *ngFor"let product of products"> 
      <span>
           <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 8 8">
             <path d="M4 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-1.5 1.78l1.5 1.5 1.5-1.5.72.72-1.5 1.5 1.5 1.5-.72.72-1.5-1.5-1.5 1.5-.72-.72 1.5-1.5-1.5-1.5.72-.72z" />
           </svg>
       </span>
       <span class="image">{{product.image}}</span>
      <span>
        <div class="itemDescriptionText-regular">{{product.number}}</div>
        <div class="itemDescriptionText-regular">{{product.description}}</div>
        <div class="itemDescriptionText-bold">{{product.style}}</div>
     </span>
     <span>
    </span>
    <span>
        <div style="padding-left:20px;padding-bottom:10px;">Price </div>
        <div><input class="transactionInput" placeholder="{{'EnterPrice' | translate}}"/>x</div>
    </span>
    <span>
       <div style="text-align:center;padding-right:30px;padding-bottom:10px;">Qty</div>
       <div style="text-align:center;">
        <input type='number' name='quantity' min=0 oninput="validity.valid||(value='');" class='qty'/>
    </span>
    <span>
    <div style="text-align:center;">
       Total Price 
    </div>
    <div><br></div>
    <div style="text-align:center;">
        {{totalAmount}} 
    </div>
    </span>
  </div>
</div>

Answer 2

If you're looking for a solution, I recommend the following approach.

Start by creating an array of products in your TypeScript file like this:

private products: Array<product> = [];

Whenever your validation passes, add the new product to the array using the following code snippet:

validateSKU() {
   const productNumber = this.transactionForm.get('ProductNumber').value;

   if (this.listOfValidProductNumbers.indexOf(productNumber) > -1 ) {
      this.products.push(product);
      this.showResults = true;
   } else {
      this.showResults = false;
   }
}

In your HTML template, you can use *ngFor to display the contents of the array dynamically. As you add new products, Angular will automatically update the list. Here's an example:

<div class="transactionDetails grid" *ngIf="showResults">
   <div *ngFor"let product of products"> 
      <span>
           <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 8 8">
             <path d="M4 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-1.5 1.78l1.5 1.5 1.5-1.5.72.72-1.5 1.5 1.5 1.5-.72.72-1.5-1.5-1.5 1.5-.72-.72 1.5-1.5-1.5-1.5.72-.72z" />
           </svg>
       </span>
       <span class="image">{{product.image}}</span>
      <span>
        <div class="itemDescriptionText-regular">{{product.number}}</div>
        <div class="itemDescriptionText-regular">{{product.description}}</div>
        <div class="itemDescriptionText-bold">{{product.style}}</div>
     </span>
     <span>
    </span>
    <span>
        <div style="padding-left:20px;padding-bottom:10px;">Price </div>
        <div><input class="transactionInput" placeholder="{{'EnterPrice' | translate}}"/>x</div>
    </span>
    <span>
       <div style="text-align:center;padding-right:30px;padding-bottom:10px;">Qty</div>
       <div style="text-align:center;">
        <input type='number' name='quantity' min=0 oninput="validity.valid||(value='');" class='qty'/>
    </span>
    <span>
    <div style="text-align:center;">
       Total Price 
    </div>
    <div><br></div>
    <div style="text-align:center;">
        {{totalAmount}} 
    </div>
    </span>
  </div>
</div>

Is there a way to create numerous div elements in real-time when a click event occurs?

Answer №1

Similar questions

Uploading Files to the Server with Angular 2 and ExpressJS

I encountered an issue while generating a crypto address on the Waves blockchain using the @waves/waves-crypto library in TypeScript

Navigating back to the top of a webpage within an Angular iframe on Safari desktop

Which Angular tools should I be using: map, pipe, or tap?

Cross-origin resource sharing problem (Backend developed in Express, Frontend in Angular)

Utilizing the <HTMLSelectElement> in a Typescript project

The dropdown navigation bar fails to close upon being clicked

Is there a way to animate in Angular 4 when the page

Why won't my boolean value in the Angular service reflect in the HTML code?

Unit testing of an expired JWT token fails due to the incorrect setting of the "options.expiresIn" parameter, as the payload already contains an "exp" property

Definitions for nested directories within a main index.d.ts

Issues with compiling arise post downloading the latest Angular 2 quickstart files

insert a gap between two elements in the identical line

Executing TypeScript Mocha test cases using ES6 modules

Manipulate the elements within an array, make changes, and then insert

Custom filtering for a RadListView with a unique search term

Disable TS4023 error in TypeScript: Unable to name external module "xyz"

The module '@types/googlemaps/index.d.ts' cannot be found

The proxy is unable to access the method within the subclass

When using Router.push() in next.js, the error TypeError: products.map is not a function may arise