title: Angular - @ViewChild from My Module
body: <p>my question is regarding Angular 2/4/5 module.</p>
  
  <p>Can't make @ViewChild work while using it from a module, the child is undefined. before I was using it as a simple component and it worked fine.
  *Tried @ViewChildren also... same</p>
  
  <p>code samples - </p>
  
  <p>app.module.ts - </p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { MyNewModule} from './modules/MyNewModule/MyNewModule.module';
  
  import { AppComponent } from './app.component';
  
  
  @NgModule({
    declarations: [
      AppComponent,
    ],
    imports: [
      BrowserModule,
      MyNewModule,
    ],
    providers: [],
    bootstrap: [AppComponent],
  })
  export class AppModule { }
  </code></pre>
  
  <p>app.component.ts - </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MyNewModule} from './modules/MyNewModule/MyNewModule.module';
  @Component({
    selector: 'app-root',
    template: `&lt;button (click)="Print()"&gt;Print child&lt;/button&gt;
               &lt;my-new-module&gt;&lt;/my-new-module&gt;
              `,
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
  
    constructor(private MyModule:MyNewModule){}
  
    ngOnInit(){}
  
    Print(){
     this.MyModule.Print();
    }
  
  }
  </code></pre>
  
  <p>modules/MyNewModule/MyNewModule.module -</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { MyNewModule} from './MyNewModule.component';
  
  @NgModule({
    imports: [
      CommonModule,
    ],
    declarations: [MyNewModule],
    providers: [MyNewModule],
    exports: [MyNewModule],
  })
  export class MyNewModule{ }
  </code></pre>
  
  <p>modules/MyNewModule/MyNewModule.ts-</p>
  
  <pre><code>import { Component, OnInit, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
  
  @Component({
    selector: 'my-new-module',
    template:`&lt;ng-template #Container&gt;&lt;/ng-template&gt;`
  })
  export class MyNewModule implements OnInit {
  
  @ViewChild('Container', {read: ViewContainerRef}) private container: ViewContainerRef;
  
  constructor(){}
  
  ngOnInit(){}
  
  Print(){
    console.log(this.container); =&gt; undefined
  }
  
  
  
  }
  </code></pre>
  
  <p>When trying to search for an answer online only solution I found was to try @ViewChildren, or that it may happen cuz the view hasn't init yet. so I even tried to do it in a timeout of 5 seconds... same result.
  Again using the same code but as a simple app and not module worked fine.</p>
  
  <p>Thanks for reading ! :)</p>