title: Angular 2 dynamic component injection and access to dynamic component attributes
body: <p>I have following code:</p>
  
  <p><strong>search.component.ts</strong></p>
  
  <pre><code>import { CoreComponent }  from './../../core/components/core.component';
  import { SearchDropDownComponent } from './search.dropdown.component';
  import { Component,Input,EventEmitter, Output, ViewChild}  from "@angular/core";
  
  
  @Component({
              selector:'search',
              templateUrl:'app/templates/search.component.html',
              styleUrls:['app/templates/css/search.component.css']
             })
  
  export class SearchComponent 
  {
     @Input()  core    : CoreComponent; 
     @Output() onSearch : EventEmitter&lt;any&gt; = new EventEmitter();
     @ViewChild(SearchDropDownComponent) dropdown: SearchDropDownComponent;
  
     private searchText:String="";
  
     search(event:any) : void
     {
       if (+event.keyCode==13 || event.type=="click")
       {
          this.onSearch.emit(event);
          return;
       }
     }
  
  } 
  </code></pre>
  
  <p><strong>search.component.html</strong></p>
  
  <pre><code>&lt;div class="input-group" id="search"&gt;
     &lt;input class="form-control kblue-background-pale" [(ngModel)]="searchText" (keypress)=search($event) placeholder="Search" list="search-dropdown" type="text"&gt;
       &lt;search-dropdown [core]="this.core" [typed]="this.searchText"&gt;&lt;/search-dropdown&gt;
       &lt;div class="input-group-btn"&gt;
         &lt;div class="btn-group" role="group"&gt;
           &lt;button (click)="search($event)" type="button" class="btn kblue-background-pale"&gt;
             &lt;span class="glyphicon glyphicon-search kblue" aria-hidden="true"&gt;
             &lt;/span&gt;
           &lt;/button&gt;
         &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>search.dropdown.component.ts</strong></p>
  
  <pre><code>import { CoreBase } from './../../core/components/core.base';
  import { ComponentFactoryService } from './../../services/services/component.fac';
  import { SearchResultComponent } from './search.result.component';
  import { CoreComponent } from './../../core/components/core.component';
  
  import { Component, 
           Input,AfterViewInit ,
           ContentChildren,ContentChild,
           Output,Inject,forwardRef,OnChanges,ElementRef,ViewChild,ViewContainerRef,ViewChildren,QueryList } from "@angular/core";
  
  @Component(
             {
              selector:'search-dropdown',
              templateUrl:'app/templates/search.dropdown.component.html',
              styleUrls:['app/templates/css/search.dropdown.component.css']
             }
            )
  
  export class SearchDropDownComponent  implements AfterViewInit , OnChanges
  {
  
     @Input()     core : CoreComponent; 
     @ViewChild('searchresult', {read: ViewContainerRef}) p: ViewContainerRef;
     @ViewChildren(SearchResultComponent) t:  QueryList&lt;any&gt;;
     @ViewChild('parent', {read: ViewContainerRef}) children: ViewContainerRef;
     private MLENGTH=2;
     private RLENGTH=0;
     private searchLength=0;
  
     constructor(private factory:ComponentFactoryService) {
  
  
     }
  
     @Input() 
     set typed(typed:string)
     {
       if (typed.length&gt;this.searchLength) 
       {
         if (typed.length&gt;this.MLENGTH)
         {
           this.core.webservice(this.result,"communities",{search:typed});
         }
         this.searchLength=typed.length;
       }
       else
       {
         if (typed.length==this.RLENGTH)
         {
           this.p.clear();
           this.searchLength=0;
         }
       }
  
        console.log(this.p.length);
        console.log(this.children);
       // for(var index = 0; index &lt; this.p.length; index++)
        //{
         // console.log(this.t);
       // }
     }
  
     ngAfterViewInit() {
  
      }
  
      ngOnChanges()
      {
        console.log(this.p.element.nativeElement.childNodes);
        console.log(this.children);
      }
  
     public result=(data:any)=&gt;
     {
      data.forEach((item:any)=&gt;
      {
        this.factory.getComponent(this.p,SearchResultComponent,item);
      });
     }
  } 
  </code></pre>
  
  <p><strong>search.dropdown.component.html:</strong></p>
  
  <pre><code>   &lt;datalist id="search-dropdown" #searchresult&gt;&lt;/datalist&gt;
  </code></pre>
  
  <p><strong>search.result.component.ts:</strong></p>
  
  <pre><code>import { CoreBase } from './../../core/components/core.base';
  import { Component,OnInit,TemplateRef} from "@angular/core";
  
  
  @Component({
              selector:'search-result',
              templateUrl:'app/templates/search.result.component.html',
              styleUrls:['app/templates/css/search.result.component.css']
             })
  
  
  
  export class SearchResultComponent extends CoreBase implements OnInit
  {
     private suggestions:String;
  
  
     constructor()
     {
      super();
     }
  
     ngOnInit()
     {
       this.suggestions=this.parameters["search"];
     }
  } 
  </code></pre>
  
  <p><strong>search.result.component.html:</strong></p>
  
  <pre><code>&lt;option&gt;{{suggestions}}&lt;/option&gt;
  </code></pre>
  
  <p><strong>component.fac.ts (Component factory service):</strong></p>
  
  <pre><code>import { CoreBase } from './../../core/components/core.base';
  import { 
           Injectable,
           ReflectiveInjector,
           ViewContainerRef,
           ComponentFactoryResolver
          }  from '@angular/core';
  
  @Injectable()
  export class ComponentFactoryService
  {
  
    constructor(private componentFactoryResolver: ComponentFactoryResolver)
    {
  
    }
  
  
  
    public getComponent(refDOM:ViewContainerRef, component:any,parameters:any)
    {
       let factory  = this.componentFactoryResolver.resolveComponentFactory(component); 
       let injector = ReflectiveInjector.fromResolvedProviders([], refDOM.parentInjector);
       let comp     = factory.create(injector);
       (&lt;CoreBase&gt;comp.instance).parameters=parameters;
       comp.changeDetectorRef.detectChanges();
  
       refDOM.insert(comp.hostView,0);
       return comp.instance;
    }
  
  } 
  </code></pre>
  
  <p>I want to develop a search dropdown suggestion widget in Angular 2, when the user types 3 characters in the input box placeholder a request is done to a backend and a json response is returned. Each search suggestion element is dynamically loaded in the search.dropdown.component, specifically in the #searchresult of search.dropdown.component.html. </p>
  
  <p>The components, search.result.component, are injected dynamically, but are rendered outside:</p>
  
  <p><a href="https://i.stack.imgur.com/xWL59.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xWL59.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/ITEfe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ITEfe.png" alt="enter image description here"></a></p>
  
  <p>I want to inject the dynamic components inside the datalist and be able to access the attribute suggestion search.result.component afterwards with the ViewChildren api. </p>
  
  <p>The problem is that the search-result components are rendered outside the datalist. If I put a div or a template tag in the html to render the dynamic elements inside, the view is rendered properly but the ViewChildren api
  doesn't retrieve the dynamic injected components.</p>
  
  <p>How can I access with ViewChildren api components rendered inside a div tag?</p>
  
  <p>Thank you</p>