Develop Reference

ReactJS - dynamically created components don't update singularly when adding sub-elements

I'm new to React - I'm creating dynamically a few components that takes a title from an input box by clicking on a button. Each subcomponent created can add a row with text inside the component itself. When I try to add a row to a subcomponent it adds to all others too. I cannot understand how to "isolate" the click for each component. Also when I create a new component it copies overs the previous text.
I'm attaching a sandbox here https://nv82kc.csb.app/
Any idea/suggestion?
Thanks!

Implementing a #hostListener only when component is called

Angular application that uses a ngx-datatable. This table auto populates its [rows]. Within these rows is an [action] that displays a popup of items. This popup is a seperate component away from the table. I am calling the popup from the table in a parent > child link e.g.
<ngx-datatable-column name="Actions">
<ng-template let-row="row" ngx-datatable-cell-template>
<app-actions-pop-up [actions]="row.actions"></app-actions-pop-up>
</ng-template>
</ngx-datatable-column>
This calls the action popup component. I have an #HostListener that listens to the clicks on the page for an Event. This then returns true/false to open or close the popup.
This is costly as my application will have 1000's of rows and it will impact the rendering as a click is being listened too regardless of whether the actions button is being clicked on.
e.g. if there are 4 row items, it will loop through 4 times. Imagine if there were 1000s of rows.
There is a lovely solution found here: Detect click outside Angular component where by it adds a #Hostlistener() to the document click event only once inside the popup component. The event should push the value of the clicked target element inside a public subject stored in a global utility service.
However, I have struggled to implement this thus far in my setup. Any help would be appreciated here - stackBlitz example

I would suggest simply adding (document:click)="clickout($event)" on your popup container.
html
<div *ngIf="isActive" (document:click)="clickout($event)" class="actions__container">
ts
clickout(event) {
this.isActive = this.eRef.nativeElement.contains(event.target);
}
Angular will subscribe to that event only in case if popup is open and unsubscribe when it's closed. So you will have zero or only one subscription.
You can also read one of my article regarding this optimization
Simple Angular context help component or how global event listener can affect your perfomance
Forked Stackblitz

Angular 5 dynamically add & delete a component instance

I'm trying to create a table that looks like a spreadsheet with editable inputs inside each td. I'm using Angular's ComponentFactoryResolver as explained here, to add a row to the table when user clicks the add button.
Once the row is added, I use EventEmitter to emit all the data of that row as the last column value is changed.
I've tried to re implement the same functionality on this StackBlitz.
I'm having the following issues:
I'm unable to emit data from the newly added components. (Check Console)
Once I add a new row, the first row (not dynamic) also stops giving me the emitted data.
I'm not sure how to delete a row if user don't needs it as I don't have the reference to it.

This is what I am suggesting. You can create a list of row objects in the parent (table) component and use *ngFor to loop it over.
<app-row
*ngFor="let row of rowList"
[row]="row"
(entryUpdate)="onEntryUpdated($event)">
</app-row>
Please have a look at this

How to dynamically display different components type based on runtime constraints in Angular2+?

I have a grid component and a dynamically determined second component.
There is a splitter component that always contains a grid in the top part.
A secondary component will be displayed in the bottom part of the splitter.
The type of secondary component will depend on the selected row type in the grid.
Select row 1 and the secondary component might be line chart
Select row 2 and the secondary component might be another grid...
As the user changes the selected row, the component and the data displayed will need updating.
Any ideas on how to set this up?

You can dynamically load second component with [ngSwitch] directive.
If you want to dynamically load them, build a code similar to this
<div [ngSwitch]="variable">
<app-first *ngSwitchCase="1"></app-first>
<app-second *ngSwitchCase="2"></app-second>
</div>
It's up to you how you will determine which component should be loaded. You can for example change value of a variable with jQuery of plain JavaScript to render specific component. Component will be automatically updated if you change a row.
If you want to automatically update content so the data from 1st component matches 2nd, you have to use some cross component communication provided by Angular4.
Good explanation how to do this here: https://www.youtube.com/watch?v=I317BhehZKM

dGrid: Using DnD and Paginaiton together

I am using Dgrid with pagination extension to display Data. For the same grid I have implemented grid's DnD. So I can move rows up and down and rearrange row index using it.
But now, as the number of rows have increased, the grid is divided into more than 5 pages. In this case, how can I move the rows from my 5th page to 1st page using DnD?
One possibility I see is by changing the page on hover of pagination bar at bottom. As per the docs there is one method called as gotoPage which switches the page programmatically. But, how to capture grid pagination hover event? And how to get page number on hover so that can be passed to gotoPage method above.

Solved this using Dgrid events on dom nodes. So basically, we can attach event for pages like below
grid.on('.dgrid-footer .dgrid-pagination .dgrid-navigation .dgrid-page-link:mouseover',function(event){
var pageindex = event.target.textContent.trim();
if(!isNaN(pageindex)){
grid.gotoPage(pageindex);
}
})
This will give control to dragged page number and then you can handle the rest afterward.