1

I have a little problem with dynamically naming components / native elements in Angular4. For example I have a directive which take native element as a argument by @Input(). It look like that: 

<div class="container">
   <div #content class="some-content">
      (...)
   </div>
</div>
<button type="button" [someDirective]="content"> Use content! </button>

It works fine. But I would like to use a few contents in the same way, so I use a array of contents:

<div class="container" *ngFor="let elem of arrays; let index = index;">
   <div #content class="some-content">
      (...)
   </div>
</div>
<button type="button" [someDirective]="content"> Use content! </button>

OFC, i will get error, because #content will not be unique. And this is my question: Is there a way to dynamically creating referece to element? I mean, something like:

<div class="container" *ngFor="let elem of arrays; let index = index;">
   <div #content${index} class="some-content">

Anyone knows solution for this problem? I must add this is only a example. I meet this problem again, so I must know how resolve this kind of issue (so extract class="container" element to separate component is not answer for me.)

Jaroslaw K.
  • 5,224
  • 2
  • 39
  • 65
  • 1
    `OFC, i will get error, because #content will not be unique.` did you try it? I believe it should work inside ngFor – yurzui Oct 27 '17 at 13:14
  • 1
    See also https://stackoverflow.com/questions/44440879/dynamic-template-reference-variable-inside-ngfor-angular-2/44441164#44441164 – yurzui Oct 27 '17 at 13:15
  • https://stackoverflow.com/questions/46443711/pass-component-reference-to-component-inside-ngfor-angular/46444824#46444824 – yurzui Oct 27 '17 at 13:17
  • https://stackoverflow.com/questions/43718907/nesting-ng-bootstrap-tabs-angular-2/43720470#43720470 – yurzui Oct 27 '17 at 13:17
  • @yurzui, sry I show my problem in bad way. I edited my post. Thanks for links. – Jaroslaw K. Oct 27 '17 at 13:18
  • Create example on stackblitz to reproduce it – yurzui Oct 27 '17 at 13:19
  • This whole strategy seems like a bad idea in the first place. You should avoid dom manipulation in general. What are you trying to achieve, at a higher level? What is someDirective supposed to do? – JB Nizet Oct 27 '17 at 14:15

0 Answers0