An HTML table featuring rows of input boxes that collapse when the default value is not filled in

My table is populated with dynamic rows of input boxes, some of which may have a default value while others return an empty string ''. This causes the table to collapse on those inputs.

 <tr *ngFor="let d of displayData">
    <td class=".mytable"> {{d.specRow}} </td>
    <td *ngFor="let l of d.limitModel ">
      <input type="text" [ngModel]="l?.target" (ngModelChange)="changeSelectedItem($event, l)" [name]="l.target" />
    </td>

Clicking in the input box next to Comment 4 adds more rows until it reaches the next input with an empty string. How can I make these rows render with an empty string when they are tied to a model?

https://i.stack.imgur.com/kC3J4.png

EDIT: The rows load correctly when not bound with ngModel. The issue arises when binding to an empty string.

htmlcssangulartypescript

Answer №1

To address your specific situation, the easiest approach would be to assign a hide class to rows with no data.

 <tr *ngFor="let d of displayData" [class.hidden]="d.specRow == ''">

Don't forget to include a 'hidden' class in your CSS styles.

Answer №2

Here's a workaround I found effective: Ensuring that each cell has a value enables proper rendering of rows.

To achieve this, I replaced null values with a ' ' in empty input boxes before looping through all the inputs to trim them upon completion of rendering.

     this.displayData?.forEach((x) => {
      x.limitModel.forEach((y) => {
        y.target = y.target.trimStart();
      });
    });

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

Transform Typescript into compiled css files without using any additional tools

Currently, I am working on a monorepo project where the main project relies on another project called components. When running the entire monorepo, the main project utilizes webpack.dev while the components project simply uses the TypeScript compiler. It l ...

csstypescriptwebpack

Techniques for importing esm libraries without requiring the "type": "module" declaration in the package.json configuration file

I have successfully implemented a TypeScript Node project but now I am facing an issue while trying to integrate the VineJS library into the project. The problem arises because VineJS is exclusively an ESM (ECMAScript Module) package, and when adding it to ...

node.jstypescriptnode-modulestsconfigts-node

Removing HTML elements from jQuery load() response

This is a follow-up to tackling the issue addressed in this specific inquiry. In my web development project, I'm utilizing jQuery's load() function to extract a headline enclosed within a div tag from one webpage and inserting it into another pa ...

phpjqueryhtml

Determine whether the Bootstrap data-style attribute is enabled or disabled

I have a bootstrap checkbox that I would like to trigger an alert dialog when it is switched off. <div class="row"> <link href="css/bootstrap-toggle.min.css" rel="stylesheet"> <script src="javascript/bootstrap-toggle.min.js ...

javascriptjqueryhtmlcss

The TypeScript compiler is generating node_modules and type declaration files in opposition to the guidelines outlined in the tsconfig.json file

For the past week, I've been trying to troubleshoot this issue and it has me completely puzzled. What's even more puzzling is that this app was compiling perfectly fine for months until this problem occurred seemingly out of nowhere without any c ...

javascriptnode.jstypescriptwindows-subsystem-for-linuxtsc

How can JavaScript be used to remove HTML tags from text while preserving a space between each line?

I found a helpful solution on Stack Overflow for removing HTML from text content. This is the method it suggests: function strip(html){ let doc = new DOMParser().parseFromString(html, 'text/html'); return doc.body.textContent || "&quo ...

javascripthtml

Tips for directing your attention to an input field in Angular

I'm struggling to find a simple solution for setting focus programmatically in Angular. The closest answer I found on Stack Overflow is about dynamically created FormControl, but it seems more complex than what I need. My situation is straightforward ...

angulartypescript

Tips for adjusting the size of a background image using zoom

Currently, I am in the process of creating my first website. At this stage, it consists of a background image, an image, and a non-functional password input section. Everything seems to be going well so far. The background image fits perfectly on the scree ...

htmlcsszoomingbackground-image

Is it possible to implement custom classes in @apply within a SCSS file in a Tailwind Next.js project?

Having trouble implementing a custom class overflow:inherit as @apply overflow-inherit in my next.js project with tailwind. It seems to be causing an error. Strangely, I can successfully use pre-built tailwind classes like @apply flex flex-col md:h-full h- ...

csssassnext.jstailwind-css

What could be the reason for my Vue application failing to load, even though the mounted event is being triggered

Here's an interesting scenario. The code functions correctly in CodePen and even in Stack Overflow's code renderer, but it fails to work on my GitHub Pages site. No errors are triggered, and the console logs for the created and mounted events ex ...

javascripthtmlvue.js

Resolve routing problems with lazy loading in Angular7

I have been working on implementing lazy loading in my Angular project. However, I am encountering the same error even after following the suggested solution. Lazy loading error on StackOverflow I have exported the components from the project module and im ...

angularlazy-loading

Libraries that provide webkit support for all browsers

Looking for a library that supports CSS webkit across various browsers, including older ones like ie6. Preferably written in JavaScript. Any recommendations? ...

javascriptcss

Creating an instance of a class using a class decorator, with or without the 'new'

Seeking alternatives to creating class instances without using the new keyword in TypeScript, I came across this excellent solution that works seamlessly in JavaScript. The code found in the repository mentioned https://github.com/digital-flowers/classy- ...

typescriptconstructordecorator

Have you noticed the issue with Angular's logical OR when using it in the option attribute? It seems that when [(ngModel)] is applied within a select element, the [selected] attribute is unable to change

Within the select element, I have an option set up like this: <option [selected]=" impulse === 10 || isTraining " value="10">10</option> My assumption was that when any value is assigned to impulse and isTraining is set to true, the current o ...

angulartypescriptangular-templateangular-template-variable

Changing the tag value within a directive

Imagine you have the following template: <p title>Hello Universe</p> How can I dynamically replace "Hello Universe" with a different string using a directive? I attempted the following approach, but it was not successful: @Directive({ sel ...

angularangular2-directives

Managing iframe scrolling using the parent window's scrollbar

I am currently working on an iframe to be utilized across various domains. The functionality of this iframe involves displaying a data list that updates when the bottom of the scroll is reached. An issue I encountered is that the parent window, where the ...

javascriptjqueryhtmliframescroll

I encountered an issue while trying to implement a custom pipe using the built-in pipe

My custom pipe seems to be functioning well, except for the built-in pipes not working within it. I've imported Pipe and can't figure out what could be causing the issue. Below is the code with the errors: import { Pipe, PipeTransform } from &a ...

angulartypescriptangular-pipe

Can the Bootstrap grid be arranged vertically?

I'm finding it difficult to work on a project with Bootstrap's horizontal grid system. What I want to achieve is to have my page divided into 4 sections, with the left side blocks having equal height and the right side blocks having varying heigh ...

htmlcssbootstrap-5

Functions outside of the render method cannot access the props or state using this.props or this.state

Just starting out with react. I've encountered an issue where a prop used in a function outside the render is coming up as undefined, and trying to use it to set a state value isn't working either. I've researched this problem and found va ...

reactjstypescriptstatethisreact-props

What is the best way to assign an index signature to a plain object?

Currently, I have this object: const events = { i: 'insert', u: 'update', d: 'delete' }; I am struggling to assign an index signature to the object. When I try the following: export interface EventsSignature { [key: ...

typescripttypescript2.0tsc