title: Angular2 Make the ViewContainerRef selector dynamic
body: <p>So I'm currently trying to create nested comments, and I'm currently bringing in a dynamic form component so people can respond to the comment. It works well when there are only parents and children, but if there are siblings, it picks the first one. For example,</p>
  
  <pre><code>--[Root Comment]
      --[Child Comment]
          --[1 - Grandchild]
          --[2 - Grandchild]
          --[3 - Grandchild]
  </code></pre>
  
  <p>If I click on the <code>&lt;a&gt;</code> tag for the 3rd grandchild that contains the selector <code>#replylink</code> the form will be appended to the first grandchild - as they all have <code>#replylink.</code> Is there anyway that I can make this tag dynamic? Like <code>#replylink{{comment.id}}</code> and then be able to update the <code>@viewchild</code> to be able to find it?</p>
  
  <p>EDIT:</p>
  
  <pre><code>@Component({
    moduleId: module.id,
    selector: 'commentsLoop',
    templateUrl: 'comments.loop.component.html',
    entryComponents: [CommentsFormComponent],
    directives: [CommentsLoopComponent]
  })
  
  export class CommentsLoopComponent implements OnInit {
      @Input() childComments:any;
      @Input() type:any;
      @Input() id:any;
      @ViewChild('replylink', {read: ViewContainerRef}) viewContainerRef;
      voteSubscription:any;
  
    private componentFactory: ComponentFactory&lt;any&gt;;
      constructor(private _http:Http, private _modal:ModalComponent, componentFactoryResolver: ComponentFactoryResolver, compiler: Compiler, private _auth: AuthService){
          this.componentFactory = componentFactoryResolver.resolveComponentFactory(CommentsFormComponent);
      };
      ngOnInit(){};
  
      commentReply(id,generation,child){
              let instance = this.viewContainerRef.createComponent(this.componentFactory, 0).instance;
              instance.comment_id = id;
              if(child) instance.parent_id = child;
              instance.id = this.id;
              instance.type = this.type;
              instance.generation = generation + 1;
          }
      }
    ...other stuff...
  }
  </code></pre>
  
  <p>the <code>&lt;a&gt;</code> tag is: </p>
  
  <p><code>&lt;a (click)="commentReply(comment.comment_id, comment.generation, comment.id)" #replylink&gt;Reply&lt;/a&gt;</code></p>