access to children of ng-template

Question

I am using primeng data table with direct edit, I need to access to children of ng-templateng

There is a table creation:

<p-treeTable [value]="files" [columns]="cols">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr>
            <td *ngFor="let col of columns; let i = index" ttEditableColumn [ngClass]="{'ui-toggler-column': i === 0}">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                <p-treeTableCellEditor>
                    <ng-template #test pTemplate="input">
                        <!-- GET THIS TAG -->
                        <input pInputText type="text" [(ngModel)]="rowData[col.field]" [ngStyle]="{'width': i == 0 ? '90%': '100%'}">
                    </ng-template>
                    <ng-template pTemplate="output">{{rowData[col.field]}}</ng-template>
                </p-treeTableCellEditor>
            </td>
        </tr>            
    </ng-template>
</p-treeTable>

In my component I use @ViewChildren decorator to grab elements from the host view:

 @ViewChildren('test') test: QueryList<TemplateRef<any>>;

 ngAfterViewInit() {
    // console.log(this.test);
    this.test.changes.subscribe(() => {
      this.test.toArray().forEach(el => {

          console.log( el);
      });
    });
  }

console output:

ElementRef {nativeElement: comment}
    nativeElement: comment
    baseURI: "http://localhost:4200/"
    childNodes: NodeList(0)
    length: 0
    __proto__: NodeList
    data: "bindings={↵  "ng-reflect-name": "input"↵}"
    firstChild: null
    isConnected: false
    lastChild: null
    length: 41
    nextElementSibling: null
    nextSibling: null
    nodeName: "#comment"
    nodeType: 8
    nodeValue: "bindings={↵  "ng-reflect-name": "input"↵}"
    ownerDocument: document
    parentElement: null
    parentNode: null
    previousElementSibling: null
    previousSibling: null
    textContent: "bindings={↵  "ng-reflect-name": "input"↵}"
    __proto__: Comment
    __proto__: Object

What do I do wrong? how to get that input inside ng-template?

StepUp · Accepted Answer · 2019-07-25T16:48:08.460

0

In order to get access to input, try to set hash sign test to input, not to ng-template:

<ng-template  pTemplate="input">         
     <input 
       #test 
       pInputText type="text" 
       [(ngModel)]="rowData[col.field]" [ngStyle]="{'width': i == 0 ? '90%': '100%'}">
     </ng-template>
</ng-template>

TypeScript:

@ViewChildren('test') test: any;

UPDATE:

You can validate like that:

   <input 
       #test 
       pInputText type="text" 
       [(ngModel)]="rowData[col.field]" [ngStyle]="{'width': i == 0 ? '90%': '100%'}">
   <span *ngIf=“rowData[col.field] == 1”> number is incorrect </span>

edited Jul 25 '19 at 16:48

answered Jul 25 '19 at 15:06

StepUp

36,391
15
88
148

I tried that, ngAfterViewInit() returns empty QueryList. Only when input enters direct edit mode I getting only selected element – Happy Coder Jul 25 '19 at 15:14
1

@MariaFinkelstein however, this is expected behavior as there is no input element until you start editing cell. There is no ‘input’ element in DOM until you start editing cell. So it is null. – StepUp Jul 25 '19 at 15:38
Makes perfect sense! I am looking away to validate the data in the column filed when the table is loaded – Happy Coder Jul 25 '19 at 15:47
@MariaFinkelstein in case of you want to be input must filled in, you can use ‘required’ attribute. In addition, you can set ‘type=“number”’ to input only numbers. – StepUp Jul 25 '19 at 15:51
@MariaFinkelstein please, see my updated answer about how you can validate your input. – StepUp Jul 25 '19 at 16:49
@ StepUp Thank you very much for helping but that not the problem I have. There is a link for another question I posted with StackBlitz demo. https://stackoverflow.com/questions/57190311/primeng-table-validation – Happy Coder Jul 25 '19 at 17:03

access to children of ng-template

1 Answers1