Guide to displaying inline details for an HTML table with a toggle button using TypeScript

I am looking to implement a toggle button in my table that will allow users to show/hide additional details for a selected row.

This is an example of the table structure I am working with:

<table>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
        <tr *ngFor='let c of companies'>
            <td><button id="{{c.companyId}}" (click)="showDetail()">Details</button> </td>
            <td>{{ c.company}}</td>
            <td>{{ c.contact}}</td>
            <td>{{ c.country }}</td>
        </tr>
    </table>

My goal is to have the details displayed inline within the table when the user clicks on the "Details" button. I am exploring options to achieve this functionality efficiently using Angular2 and typescript. Any suggestions for a better approach to display details in a user-friendly way?

javascriptangulartypescripthtml-table

Answer №1

A slight modification from birwin's solution, since using template without a directive is not possible here; therefore, opting for ng-container is the way to go.

<ng-container *ngFor='let c of companies'>
    <tr>
        <td><button id="{{c.companyId}}" (click)="c.details = !c.details">Details</button> </td>
        <td>{{ c.company }}</td>
        <td>{{ c.contact }}</td>
        <td>{{ c.country }}</td>
    </tr>
    <tr *ngIf="c.details">
        <td>Details</td>
    </tr>
</ng-container>

View Demo

Answer №2

If you're looking to display company information in a dynamic table format, consider using the following code sample:

<table>
    <tr>
        <th>Company Name</th>
        <th>Contact Person</th>
        <th>Country</th>
    </tr>
    <ng-container *ngFor='let comp of companies'>
        <tr>
            <td><button id="{{comp.id}}" (click)="displayDetails(comp)">Show Details</button></td>
            <td>{{ comp.name }}</td>
            <td>{{ comp.contact }}</td>
            <td>{{ comp.country }}</td>
        </tr>
        <tr *ngIf="showingDetails === comp.id">
            <td colspan="3">Details: {{ comp.details }}</td>
        </tr>
    </ng-container>
</table>

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

Is there a way to change the HTML5 input type date format to be displayed as "01-Jan-2024"?

Having trouble formatting my HTML5 date input to display as "01-Jan-2024". I've attempted using placeholder="dd-mm-yyyy" value="" and required pattern="[0-9]{2}-[0-9]{3}-[0-9]{4}", but it's not working. Can someone please provide guidance on how ...

javascripthtmlangularasp.net-mvc-4

Showing outcomes by making rapid consecutive AJAX requests

If you need a visual representation, I have a PHP script for a Hotel Management application that showcases a calendar (with columns representing days of the month and rows displaying prices per day). This script can be accessed in edit mode, where it gene ...

phpjavascriptajax

Display HTML components as JSON data using AngularJS

Recently, I started exploring angular js and faced a challenge in formatting json data with the help of angular js. Below is a snippet of my json data: [ {"field_add_link": "<a href=\"/drupal3/drupal3/\">Home</a>"}, {"field ...

javascripthtmlangularjsjson

Tips for adjusting $(document).height() to exclude the height of hidden divs

I am facing an issue with jQuery miscalculating the space at the bottom of a page I'm working on, possibly due to hidden div layers present on the page. Is there a way for jQuery to accurately calculate the 'real' height of the page as it a ...

javascriptjqueryhtmlcss

Stopping XSS Attacks in Express.js by Disabling Script Execution from POST Requests

Just starting to learn ExpressJs. I have a query regarding executing posted javascript app.get('/nothing/:code', function(req, res) { var code = req.params.code; res.send(code) }); When I POST a javascript tag, it ends up getting execut ...

javascriptsecurityexpressxss

Upon closing the browser, the Angular ngx-cookie-service data disappears

Currently, I am working on setting a cookie using ngx-cookie-service so that I can retrieve it later as needed. Everything seems to be functioning properly as the code works well when refreshing the page, and the cookie is visible in Chrome developer tool ...

angularcookiesngx-cookie-service

Developing a Type-inclusive TypeScript encapsulation for the first level of Array.flat() with generic functionality

I am working on creating a function that constructs an array from the input arguments, allowing for only one type or arrays of that same type. Essentially like (...items)=>items.flat(1), but with type safety and generics. It seems crucial to ensure that ...

arraystypescripttypescript-generics

Unable to conceal tab content upon clicking the identical tab

I recently implemented a tab system with panels that seems to be working well when switching between tabs. However, I'm facing an issue where clicking on the same tab does not hide the corresponding panel and reset the aria attributes as intended. I&a ...

javascripthtmljquerycss

Can the value of ng-model be altered without using ng-change function?

Can the ng-model value be altered without using the ng-change function? The method below does not seem to work. <div ng-app="myApp"> <div ng-controller="MyCtrl"> <input id="checkbox" type="checkbox" ng-model="field"> <div> {{field ...

javascriptangularjs

How to Show Extensive Content in an Android WebView with a Fixed Height

Is anyone familiar with how to make a large HTML page fit completely within a web-view on an Android device without any vertical scroll bars? I want the entire webpage to be displayed within the varying height of the web-view when the user clicks "fill hei ...

javajavascriptandroidhtmlwebview

Which data types in JavaScript have a built-in toString() method?

Positives: 'world'.toString() // "world" const example = {} example.toString() // "[object Object]" Negatives: true.toString() // throws TypeError false.toString() // throws TypeError Do you know of any other data types that wi ...

javascript

Search function displays "undefined" despite the presence of "objects" in the JSON array

I'm currently experiencing difficulties with retrieving real-time user data through an AJAX request from a MySQL database. The PHP script ("live_search.php") is only returning the value "object," causing the variables to print as "undefined." Here ar ...

javascriptphpajaxsearchprepared-statement

Encountering a 404 error in Angular 9 when refreshing the browser

Encountering a 404 error when attempting to access mysite.com/menu directly, but no issues when navigating through the homepage and selecting the menu option. Tried implementing an .htaccess file following Angular documentation, yet problem persists. Cur ...

angularvps

Guide on building a basic cache system with RxJs

I am interested in developing a caching service using RxJs. The concept is quite simple - I have a class that retrieves initial data from a server and a websocket that sends notifications to this service regarding additions, edits, or deletions of entities ...

angularrxjsreactive-programming

How can I enable autofocus on a matInput element when clicking in Angular 6?

Is there a way to set focus on an input element after a click event, similar to how it works on the Google Login page? I've tried using @ViewChild('id') and document.getElementId('id'), but it always returns null or undefined. How ...

angularhtmlangular-material

Implement a feature on React using hooks that detects when a user clicks

I'm attempting to utilize React hooks to check if a user has clicked outside of an element. I'm using useRef to grab a reference to the element. Could someone help me troubleshoot this? I'm encountering the following errors and referencing ...

javascriptreactjsecmascript-6

Creating a ref in React with TypeScript to access the state of a child component

Is there a way to access the state of a child component within the parent component without using handlers in the child or lifting the state up in the parent? How can I utilize refs in React with TypeScript to createRef and retrieve the child's state ...

node.jsreactjstypescriptreact-typescript

The state object in Next.js appears to be missing

const [ values , setValues ] = React.useState({ input_type: '', elements: [] }) const addOption = () => { let newElements = values.elements newElements.push({ type: "option", ...

javascriptreactjsnext.js

Looking for ways to enhance the readability of JSON in your React-Typescript application?

After completing Stephen Grider's React and Typescript course on Udemy, I developed the JBook app. One of the challenges I encountered was ensuring that the content from a user's local file is displayed clearly in JBook. Currently, all content is ...

reactjsnode.jsjsontypescript

A method to efficiently send multiple axios GET requests by incrementing the URL parameters

Is there a way to efficiently send multiple HTTP GET requests using Axios? For instance: let maxRequests = 3000; let currentRequest = 0; do { currentRequest = currentRequest + 1; await response = axios.get(`https://example.com/${currentRequest}` ...

javascriptnode.jsecmascript-6axios