Dynamically insert components into table rows with ComponentFactory in Angular version 6

My component contains the following HTML structure:

<table>
<thead>
<tr>
<th>
</tr>
</thead>
<tbody>
<ng-container #container class="sample">

</ng-container>
 </tbody>
</table

Another component has only a single table row (tr) as follows:

<tr>
 <input class="form-control form-control-text-input" type="text" placeholder="Enter ID" [(ngModel)]="id"/>
</tr>

Currently, I am dynamically adding this table row component using the solution provided in this answer from Stack Overflow: Dynamically ADDING and REMOVING Components in Angular

However, when it is rendered on the browser, I encounter the issue illustrated in this image: Click here to view the image

The dynamic component is rendered within a div, but I specifically need the tr inside the tbody.

Any assistance with resolving this issue would be greatly appreciated.

UPDATE: A dummy example has been created on StackBlitz for reference: Stackblitz

angulartypescriptangular6

Answer №1

I decided to make some modifications (see screenshot below for reference)

  1. Update the selector in the add-timeseries-row.component.ts file:

import { Component } from '@angular/core';

@Component({
  selector: 'custom-add-timeseries-row',
  templateUrl: './add-timeseries-row.component.html',
  styleUrls: ['./add-timeseries-row.component.css']
})
export class CustomAddTimeseriesRowComponent {
 id1:string;
 id2:string;
 id3:string;
}

  1. Add this code snippet to add-time-series.component.css:

custom-add-timeseries-row {
    display: contents;
}

https://i.sstatic.net/9VH6G.jpg

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

Transitioning to Vue 3 has introduced a change where prop types are now classified

During the process of migrating the application from Vue 2 to Vue 3 by following this guide: , I encountered an issue related to Props and their types. All props were marked as type unknown by the linter, even though no errors were shown in the template it ...

typescriptvue.jsmigrationeslint

Guide to deploying Angular application on a weblogic server using a WAR/EAR file

I am facing difficulties deploying an Angular application on a WeblogicApplication server. My current approach is not yielding successful results: This is what I have done: 1) Built my Angular application using exec-maven-plugin and placed the result i ...

angularmavenweblogicweblogic12c

Error Handling in Angular Reactive Forms for Array Type Form Controls

I'm currently working on an Angular project that involves creating a reactive form with fields using FormArray. While I am able to detect and display the error status as "INVALID" for dynamic fields, I'm facing challenges in handling errors for c ...

angularangular-reactive-formsformarray

Failure Caused by Changing Value in Radio Button

I have been struggling with a particular issue for some time now, and I am hoping someone can provide an answer. The task at hand is quite simple - I am attempting to create an input within an *ngFor loop. However, the radio buttons are not functioning as ...

javascripthtmlangularformsradio-button

Node.js has been giving me trouble as I try to install Inquirer

:***Hey Guys I'm Working on a TypeScript/JavaScript Calculator! ...

node.jsjsontypescriptnpmyarnpkg

The Angular component template fails to reflect the current value received from the observable

I am facing an issue with a component that updates its state from a service observable: import {Component} from '@angular/core'; import {SessionTimeoutService} from "./session-timeout/session-timeout.service"; import {Observable} from & ...

angular

Vue 3 components array typified with Typescript

I'm attempting to establish an array of components representing various steps. Initially, I attempted to assign the type to these steps: const steps = ref<Component[]>([ Component1, Component2, Component3, ]); However, this approach is n ...

javascripttypescriptvue.jsvuejs3

I encountered TS2300 error stating a duplicate identifier appeared once I transferred my code to Angular CLI

Currently undergoing the process of transitioning our code to Angular CLI for our hybrid app. The plan is to migrate the Angular part to CLI while the AngularJS portion continues to be handled by custom Webpack. It's worth noting that both parts (Angu ...

angulartypescriptangular-cli-v6type-definition

Retrieve a specific data point from a web API using Angular framework

Objective: How can I retrieve the specific value "test" in Angular? Issue: An error message is being displayed. Error: SyntaxError: Unexpected token e in JSON at position 1 at JSON.parse () Which syntax element am I missing? ASP.NET // Retrieve "tes ...

asp.netangulartypescript

Currently in the process of executing 'yarn build' to complete the integration of the salesforce plugin, encountering a few error messages along the way

I've been referencing the Github repository at this link for my project. Following the instructions in the readme file, I proceeded with running a series of commands which resulted in some issues. The commands executed were: yarn install sfdx plugi ...

javascripttypescriptnpmsalesforceyarnpkg

Angular 9 Event Emitter fails to trigger a signal

I am currently working on passing data from a form-component to a modal-component using Event Emitter. Below is the configuration I have set up for this - Form.ts @Output() userEmail = new EventEmitter; submit(order): void { this.userEmail.emit(order.va ...

angularangular-event-emitter

Having difficulty in synchronizing the redux state and realm database into harmony

Struggling to update my redux store with data from useState. While troubleshooting, I noticed that errors are often related to the realm database, impacting the redux store unintentionally. LOG [Error: Wrong transactional state (no active transaction, wr ...

reactjstypescriptreact-nativerealm

Dynamic Mat-select-trigger that automatically adjusts its size to fit the content

Currently, I am experimenting with an Angular Mat-Select that allows multiple selections. To display the selected values in the value field, I have implemented a custom Mat-Select-Trigger. My goal is to enable automatic resizing of the value field (similar ...

cssangularflexboxangular-material

Tips for handling the completion of an asynchronous http subscription within a multi-level nested function

Recently, I've been diving into Rxjs and have been working on setting up a canActivate guard for my nativescript-angular application. The main goal is to check if the user has a JWT token stored, validate it with the server, and redirect them to the h ...

angularrxjsangular2-nativescriptangular-route-guards

Learn the method to navigate back from a side menu-pushed page on Ionic framework

Currently working on developing an ionic app where I want to be able to push a page directly from my side menu. However, I have encountered an issue where once I navigate to the new page, I am unable to swipe back to the previous page and can only go back ...

javascriptangulartypescriptcordovaionic-framework

React Typescript: The specified argument type cannot be assigned to the parameter type

Creating a Check Box Button React component has resulted in an error related to setRSelected(1) and setRSelected(2)... const [cSelected, setCSelected] = useState([]); const [rSelected, setRSelected] = useState(); const onCheckboxBtnClick = (selected ...

reactjstypescriptcomponents

Leverage the power of TypeScript with knockout's pureComputed function

I am facing an issue with referencing the this object in a function called problem: const c = { f() { console.log("hi"); }, problem: ko.pureComputed(() => { return this.f(); }), }; [ts] The containing arrow function captures the glob ...

typescriptknockout.js

Is there a way to stop query parameters from piling up whenever I adjust the filter settings?

Encountering issues with query param accumulation when selecting a new filter from the dropdown. How can I ensure that the current filter is retained with each change? Below is the select component code snippet : import SelectInput from '@/Components ...

reactjstypescriptinertiajs

The error occurred due to an invalid regular expression when trying to create a route with route parameters

In my development process, I have a specialized class for creating routes and another class for bundling these routes before adding them to an express app or router. However, I encountered a problem with my route class when I attempted to create a route wi ...

node.jstypescriptexpress

Ways to transform an ISO string formatted date time into the following hour

I have a function that converts my date to RFC3339 format, but I want it to be converted to the upper time limit. Could someone please help me figure out how to convert it to the upper limit? const date = new Date(); // converting to RFC 3339 format ...

javascriptangulardatetime