Hi Janak,
i think this is a very complex strategy, you can use a component with a
table binded in a simple array of object with the data you need, on click
you can add an object to the array and the table update dynamically
public dataViewModel:{col1:string, col2:string, col3:string} [] = [];
//...
public onAddClick(){
this.dataViewModel.push({col1:'col 1', col2:'col 2', col3:'col 3'});
}
html
//..
<div class="row" *ngFor="let item of this.dataViewModel">
<div class="col">{{item.col1}}</div>
<div class="col">{{item.col2}}</div>
<div class="col">{{item.col3}}</div>
</div>
Il giorno giovedì 27 settembre 2018 19:26:55 UTC+2, janak prajapati ha
scritto:
>
>
> I am working on solution in which i want to append dynamically created
> component after clicked row
>
> I have table consist rows with action button on click of which i will call
> angular function and load component after that row.
>
> Here is table code
>
> <div class="row" *ngFor="let rData of reportData; let i = index;" >
> <div class="col" >
> <button class="btn btn-sm"
> (click)="loadChildComponent()">+</button>
> </div>
> <div class="col">Name</div>
> <div class="col">Description</div>
> <ng-template #dynamic></ng-template>
> </div>
>
> Code for dynamic components
>
> Service.ts
>
> import { DynamicComponent } from './dynamic.component'@Injectable()export
> class Service {
> factoryResolver;
> rootViewContainer;
> constructor(@Inject(ComponentFactoryResolver) factoryResolver) {
> this.factoryResolver = factoryResolver
> }
> setRootViewContainerRef(viewContainerRef) {
> this.rootViewContainer = viewContainerRef
> }
> addDynamicComponent() {
> const factory = this.factoryResolver
> .resolveComponentFactory(DynamicComponent)
>
> const component = factory
> .create(this.rootViewContainer.parentInjector)
>
> this.rootViewContainer.insert(component.hostView)
> }}
>
> Here is component file.
>
> dynamic.component.ts
>
> import { Component } from '@angular/core'@Component({
> selector: 'dynamic-component',
> template: `<div class="row" >
> <div class="col">Data</div>
> <div class="col">Data</div>
> <div class="col">Data</div>
> <div class="col">Data</div>
> <div class="col">Data</div>
> <div class="col">Data</div>
> <div class="col">Data</div>
> <ng-template #dynamic></ng-template>
> </div>`})export class DynamicComponent { }
>
> Functions used to render dynamic component
>
> @ViewChild('dynamic', {
> read: ViewContainerRef
> }) viewContainerRef: ViewContainerRef
>
> loadChildComponent() {
> this.service.setRootViewContainerRef(this.viewContainerRef)
> this.service.addDynamicComponent()
> }
>
> Right now its appending in same div for any of rows
>
> i would like to append it after clicked row
>
> Please help..
>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
