How to reveal hidden Div element at a specific index with Angular Material table

In my mat-table, there are several functionalities available:

1. The ability to add or remove rows

2. Adding data into a row using different controls such as combo-boxes, text boxes, etc.

One of the controls is a text box labeled "Additional Information". When a "?" is entered, a hidden 'div' element is displayed which will eventually hold a list of data.

The problem arises when I add multiple rows; if I enter a "?" in one row, the hidden 'div' displays on all rows.

I am looking for a solution where each added row is indexed and only the 'div' element of that specific row is displayed.

My knowledge of HTML is limited, and I am fairly new to Angular. As a result, I have created a demo on StackBlitz highlighting this issue: demo

htmlangulartypescriptangular-material

Answer №1

CHECK OUT THIS FUNCTIONING STACKBLITZ
I have implemented an array called expandedCols : boolean[] = []; to monitor the state (expanded or not) of your div. Whenever a row is added, a corresponding element with a default value of false is also added to this array. By inputting '?', the value at index i is changed to true.

<ng-container matColumnDef="additionalCode" class="parent" >
      <th mat-header-cell *matHeaderCellDef>Additional Code</th>
      <td mat-cell *matCellDef="let element; let i = index" class="parent" >
        <mat-form-field class="type">
          <input matInput (keyup)="toggleLookup($event, i)" autocomplete="off" (keydown.ArrowDown)="onDown()" placeholder="Enter ?">
        </mat-form-field>
        <div *ngIf="expandedCols[i] == true" class="child">It has been expanded
          <button (click)="expanded = false">Close</button>
        </div>
      </td>
</ng-container>

TS:

addRow() {
    this.doAddRow();
    this.expanded = false;
    this.expandedCols.push(false);
  }

toggleLookup(event: any, i): void {
    if (event.target.value !== '?') {
      return;
    }
    event.target.value = '';
    this.expanded = true;
    this.expandedCols[i] = true;
  }

Remember to handle removing rows properly by using splice method.

Answer №2

To effectively address your problem, consider utilizing row-specific local state by placing the attribute within the column collection (with a hidden new column). This approach allows you to control the expanded property for each individual row. For reference, check out this updated stackblitz.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How should h tags be correctly utilized?

Is it better to use h tags or lists to style content? Take a look at this code, is using h tags the appropriate choice here or should I consider using a list instead? <div class="col-xm-12 col-sm-6 col-md-4"> <h4>Get in touch< ...

html

The number input is not compatible with JavaScript/jQuery validation

While working on input field validation using javascript/jQuery code, I encountered an issue where the code worked fine with input type text but did not support input type number. Specifically, the 'number' type input did not work at all in FireF ...

javascriptjsonhtml

Is there a way to have two SVG files displayed on a single HTML page at the same time

Currently, I am facing an issue with my graphs. I have a line graph and a boxplot, but the boxplot is appearing below the line graph when I want it to be next to it. Any suggestions on how I can achieve this layout? Thank you! I attempted to use 2 differe ...

javascripthtmlcssd3.jssvg

Wait for the Selenium test to continue only when a specific element is visible on

<img style="width: 640; height: 640;" id="img108686545" alt="Loading Word War..." src="www.something.com/anu.jpg"> Is there a way to detect when this particular element is visible on the page? The value of the "id" attributes keeps changing with eac ...

pythonhtmlseleniumbeautifulsoup

Emphasizing sections using a specific class for paragraph highlighting

Is it possible to dynamically change the style of paragraphs based on certain classes? Let's say we have a text with a list of p elements and we want to modify the styles of paragraphs that come after specific classes, such as 'alert' or &ap ...

javascripthtmlcss

Ways to make the submenu display underneath the main menu

Click here to view the menu It is important to note that you may need to expand the Result Box in order to see the full menu. The issue I am currently facing involves fixing a submenu that appears when hovering over the Men and Women <li> elements. ...

javascriptjqueryhtmlcssmenu

"Enhance Your Website with Dynamic Text Effects using JavaScript

Is there a way to continuously animate text during the loading process of an AJAX request? I've tried implementing various methods, such as using a setTimeout function or an infinite loop, but nothing seems to work for repeating the animation once it& ...

javascripthtmlcssanimation

Angular6 ng test is not successful

I recently upgraded my project from Angular4 to version 6. Everything seems to be working fine, except for the issue with running ng test: ERROR [karma-server]: Server start failed on port 9876: Error: No provider for "framework:@angular/cli"! (Resolving ...

angular

Issues with functionality of JavaScript calculator in HTML forms

Currently, I am working on creating a basic perimeter calculator specifically designed for a projector screen. This code is intended to take the response from a radio button input and the diagonal length in order to accurately calculate the perimeter base ...

javascripthtmlformscalculator

Is it Possible to Ajaxify a Forum Using a Bookmarklet?

My coding knowledge is limited to HTML. However, I am curious about the possibility of creating a bookmarklet that could ajaxify a forum, automatically refreshing and adding new posts to the page. Is such a thing possible? It's frustrating having to ...

htmlajax

Sending information to ng-template in Angular6

I'm new to Angular 6 and I have a query. How can I pass data to an ng-template from ngFor? component.html <tr *ngFor="let user of data"> <td>{{user.id}}</td> <td>{{user.username}}</td> <td>{{user ...

angularangular6

Unable to alter the background color of the text box

I am currently struggling with my code where I am trying to overlay a text box on an image. Even after setting the background color to white, it still shows up as transparent. I have successfully done this in the past, but for some reason, it is not work ...

htmlcssbackground-color

What is the information stored inside the div element?

How can I extract the contents of a div using bs4? >>> Doc <div class="document"> <p>Text.</p> <p>More text</p> </div> >>> type(Doc) bs4.element.Tag I am looking to retrieve: <p>Text.</p> ...

pythonhtmlbeautifulsoup

Using JavaScript to assign function arguments based on arbitrary object values

I am facing a challenge with a collection of arbitrary functions and a method that takes a function name along with an object or array of parameters to call the respective function. The issue arises from the varying number of inputs in these functions, som ...

javascripttypescript

AngularJS: Utilizing $http to fetch XML data instead of JSON

Looking to extract data from a website using angularjs / javascript. I am familiar with the $http object in angularjs which can make get requests. I have used it before to retrieve json, but I'm wondering if I can use it for XML (HTML) as well? (I th ...

javascripthtmlxmlangularjs

Programmatically adjusting the color of mask images - Creative image theming

Is it possible to alter the color of an image hosted on a different website? Here is a link to an example image: Is there a technique to overlay a specific color on the image and only modify certain colors, such as changing or adding a layer of light gre ...

phpjquerycsshtmlimage-manipulation

How do I go about updating my custom element after making a REST call using @angular/elements?

Looking for some assistance with my latest creation: import { Component, ViewEncapsulation, OnInit, } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { BehaviorSubject } from 'rxjs'; @C ...

angularangular6angular-elements

Adjust the styling of the anchor tag within the selected div by utilizing jQuery

I am struggling with changing the color of a specific anchor tag when clicked inside a div with class .product_wishlist. Currently, all anchor tags within .pw div are changing colors. Is there a way to apply selected css only to the clicked element? Any he ...

javascriptjqueryhtmlcss

We are unable to update the document in AngularFire as the document reference ID could not be retrieved

I am currently working on an update function that is designed to retrieve a specific document based on its unique document uid, which is connected to the authenticated user's uid. In another part of my code, I have a function that successfully fetche ...

angulartypescriptfirebase

Tips for utilizing the viewport to ensure that mobile devices adjust to the width of the content

Currently, I am designing a book reader where the width of the book can vary, ranging from 1028px to 2000px to 560px. I want mobile devices to automatically scale the book to fit the screen width when viewing it. This is what I have been doing so far wit ...

htmlcssmobileviewport