How to inject from parent component a child view to DOM using @ViewChild from ts code with datatables

Question

This is the parent component which creating a data table:

 import {CollectedItemsDynamic} from "../collected-items-datatable/collected-items-dynamicView";
    declare var $: any;

    @Component({
      selector: 'sa-datatable-roi',
      template: `<table class="dataTable {{tableClass}}" width="{{width}}">
            <ng-content></ng-content>
          </table>`,          
    })
    export class DatatableComponent implements OnInit {

      @ViewChild(CollectedItemsDynamic) collectedItemsDynamic: CollectedItemsDynamic;

      ngOnInit() {
        this.render()    
      }

      render() {
        let element = $(this.el.nativeElement.children[0]);
        let options = this.options

        const _dataTable = element.DataTable(options);


          element.on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = _dataTable.row( tr );
            if ( row.child.isShown() ) {
              row.child.hide();
              tr.removeClass('shown');
            }
            else {
              row.child( -----> Inject_here_the_CollectedItemsDynamic_template <----- ).show();
              tr.addClass('shown');
            }
          })
        }
    }

This is the dynamic component :

import {Component, Input, ElementRef, AfterContentInit, OnInit} from '@angular/core';

declare var $: any;


    @Component({
        selector: 'collected-items-dynamic',
        templateUrl: `
                 <td><button (click)="test()"></button></br></br></td>               
    `,
    })

    export class CollectedItemsDynamic{

        public test() {
            console.log(test);
        }
    }

I would like to inject the html template of the CollectedItemsDynamic component after the row using row.child( -----> Inject_here_the_CollectedItemsDynamic_template <-----).show();

That should add an after the selected row, and the button click should print to the console == binding in CollectedItemsDynamic should work.

Is there a way to inject into the DOM of DatatableComponent the CollectedItemsDynamic?

Sounds to me like you rather want something like `ngForTemplate` or `ngTempletOutlet` http://stackoverflow.com/questions/41239733/angular-2-bind-transcluded-content-to-loop-variable/41239844#41239844, http://stackoverflow.com/questions/37676593/how-to-repeat-a-piece-of-html-multiple-times-without-ngfor-and-without-another/37676946#37676946 — Günter Zöchbauer, Feb 16 '17 at 16:22
@GünterZöchbauer i have to use it that way because im using the datatable.min.js which is not fully ported into angular2 there for i should try to add the component template using the row.child(...).show() — USer22999299, Feb 16 '17 at 16:27

How to inject from parent component a child view to DOM using @ViewChild from ts code with datatables

0 Answers0