CODEWITHSUNDEEP
angular
Mayank Sudden
Mayank Sudden

Reputation: 215

How to get elementRef in fromArray in angular

How to access element ref from from array. Like #cTab5. I access the #cTab5 with viewchild in ts. but don't know how to access with form array.

  @ViewChild("cTab5", { static: false }) cTabE5: NbTabComponent;
 this.campaignLinesAarray().at(Index).get("cTabE5");

  <nb-tab tabTitle="Comments" #cTab5>                              
   </nb-tab>

actually i want acces reference variable with formArray. My html like below

 <form [formGroup]="add_iroForm">
<div
                  class="accordion-container col-sm-10 col-12"
                  formArrayName="campaign_lines_array"
                  *ngFor="
                    let item of add_iroForm.get('campaign_lines_array')
                      .controls;
                    let i = index
                  "
                >
 <nb-tabset #tabset{{i}} id="acceptable">
  <nb-tab tabTitle="Comments" #cTab1>                              
   </nb-tab>
    <nb-tab tabTitle="Comments" #cTab2>                              
   </nb-tab>
    <nb-tab tabTitle="Comments" #cTab3>                              
   </nb-tab>
</nb-tabset>
</div>
</form>

Upvotes: 3

Views: 2784

Answers (1)

Eliseo
Eliseo

Reputation: 57941

if you has a reference variable in a *ngFor, you need use -in code- @ViewChildren, if you need use in .html use the variable, Angular take account of this, e.g.

<div #item *ngFor="let i of [0,1,2,3]" >
   <button (click)="click(item)">button</button>
</div>
<button (click)="showmeAll()">button</button>

@ViewChildren('item')items:QueryList<ElementRef>
click(item)
{
   console.log(item.innerHTML)
}
showmeAll()
{
  this.items.forEach(x=>{
    console.log(x.nativeElement.innerHTML)
  })
}

Update well,

First of all, we are change a bit your .HTML, see that I get out the "formArrayName" from the *ngFor and use the same "referenceVariable" "tabset", and I add the properties [tabId] to all our tabs

<div formArrayName="campaign_lines_array">
  <div  class="accordion-container col-sm-10 col-12"
      *ngFor="let item of add_iroForm.get('campaign_lines_array').controls;let i = index">
     <nb-tabset #tabset id="acceptable+{{i}}">
       <nb-tab tabTitle="Comments" #cTab1 [tabId]="'tab0-'+i">                              
       </nb-tab>
       <nb-tab tabTitle="Comments" #cTab2 [tabId]="'tab1-'+i">                              
       </nb-tab>
       <nb-tab tabTitle="Comments" #cTab3 [tabId]="'tab2-'+i">                              
       </nb-tab>
     </nb-tabset>
   </div>
</div>

We can use also ViewChildren to get the tabsets

@ViewChildren('tabset',{read:NbTabsetComponent)items:QueryList<NbTabsetComponent>

or, even we can use 

@ViewChildren(NbTabsetComponent)items:QueryList<NbTabsetComponent>

But, if you see the API of TabsetComponents you see that we can do a few things with the TabSets. (only ask about routerParam). But the interest is the API of NbTabComponent. So, better get all the tabs using a viewChildren

  @ViewChildren(NbTabComponent) tabs:QueryList<NbTabComponent>

So we has all the tabs in the variable tabs, this allow us, e.g. in a function click, make active all the "tab2", or make active the first tab of the second tabset

  click()
  {
    this.tabs.forEach(x=>{
      x.active=x.tabId.startsWith("tab1")
    })
  }
  click2(index)
  {
    this.tabs.filter(x=>x.tabId.endsWith("-"+index)).forEach(x=>{
      x.active=x.tabId.startsWith("tab0")
    })
  }

Update2 we can has a function to active a tab of a tabset

   setActiveTab(indexTabSet,indexTab)
   {
        this.tabs.filter(x=>x.tabId.endsWith("-"+indexTabSet)).forEach(x=>{
          x.active=x.tabId.startsWith("tab"+indexTab+"-")
        })
   }

A fool example

Upvotes: 3

Related Questions