angular 2 @viewChild in a loop

Question

I am trying to create a table. Each odd row has data and each even row is an expandable row. I need to dynamically load data to the expandable row when user press the expand icon.

I can't find the way to do it with ComponentResolver, local variable is useless inside a loop. is there another angular way except using the ElementRef workaround?

<template ngFor let-row="$implicit" [ngForOf]="rows" let-i="index">
        <tr class="row-rule-review ">
            <td class="col-applications">
            <img class="stack-img" src="images/expand.png" (click)="toggleButton(i)">

        </td>
             ...
        </tr>
        <tr class="row-extended">
            <td colspan="8">
                <div #target class="extended-content" id="extended-content-{{i}}" [style.height.px]="isExpand[i] ? 150 : 0">
                </div>
            </td>
        </tr>        
    </template>

the function on the component with :

toggleButton(index, cmp) {
        let that = this;
        if (this.isExpand[index]) {
            this.isExpand[index] = false;
        }
        else {
            if (this.extendComponent[index] === undefined) {
                this.resolver.resolveComponent(RowExpand).then((factory: ComponentFactory<any>) => {
                    that.extendComponent[index] = cmp.createComponent(factory);
                });
            }
            that.isExpand[index] = true;
        }
    }

in this senario, cmp.createComponent is undefined

Where is the icon the user clicks on? Why do you think "local variable is useless". What do you mean by "local variable" - "template variable"? Can you please elaborate a bit more what exactly should happen on what action? — Günter Zöchbauer, Jun 06 '16 at 07:14
the icon is inside the first in one of the .Local variable = #target — Avi, Jun 06 '16 at 07:16
No, I tried using @ViewChild decoration and I always get the first instance (the first expand row on the grid). I will gladly try your idea but how do I convert the target parameter to ViewContainerRef? — Avi, Jun 06 '16 at 08:00
Your question doesn't mention `ViewContainerRef`. Please elaborate a bit more on what you try to accomplish. — Günter Zöchbauer, Jun 06 '16 at 08:01
May I ask why you use `ViewContainerRef.createComponent()` and not just ``? — Günter Zöchbauer, Jun 06 '16 at 08:10
:0 OMG. Do I really burning down a house to kill a fly? Thank you Man! — Avi, Jun 06 '16 at 08:23

score 0 · Accepted Answer · edited May 23 '17 at 12:09

You can use the wrapper I explain in Angular 2 dynamic tabs with user-click chosen components like:

<template ngFor let-row="$implicit" [ngForOf]="rows" let-i="index">
    <tr class="row-rule-review ">
        <td class="col-applications">
        <img class="stack-img" src="images/expand.png" (click)="toggleButton(i)">

    </td>
         ...
    </tr>
    <tr class="row-extended">
        <td colspan="8">
            <div #target class="extended-content" id="extended-content-{{i}}" [style.height.px]="isExpand[i] ? 150 : 0">
              <dcl-wrapper type="expandedComponent" *ngIf="isExpand[i]></dcl-wrapper>
            </div>
        </td>
    </tr>        
</template>

score -1 · Answer 2 · edited Aug 16 '18 at 19:34

     <tbody>
       <tr ng-repeat="dep in vm.department" >
         <td ng-if="!dep.show">
           <label class="checkbox checkbox-inline">
             <input type="checkbox" ng-model="dep.selected" ng-change="oneCheckboxSelected(dep)">
             <i class="input-helper"></i>
           </label>
         </td> 
         <td class="col-xs-2" ng-class="{'':dep.show == false , 'bg-white-row b-t-b-blue':dep.show == true}">
           <div class="col-lg-12  col-md-12 col-sm-12 col-xs-12 text-right" ng-class="{'':dep.show == false , 'bg-edecec-row-div':dep.show == true}">
             <a href="" ng-click="vm.getdepDetails(dep)"> 
               <i ng-if="!dep.show" class="glyphicon glyphicon-plus fa-3x font-BB"></i>
               <i ng-if="dep.show" class="glyphicon glyphicon-minus fa-3x blue-font"></i>
             </a>
           </div>
         </td>
       </tr>
     </tbody>

write onclick on the a tag vm.getdepDetails(dep) and in controller you can write the function and pass the params

`ng-click` doesn't look like Angular2 – Günter Zöchbauer Jun 06 '16 at 08:04 — Günter Zöchbauer, Jun 06 '16 at 08:04

angular 2 @viewChild in a loop

2 Answers2