title: Angular ViewChild undefined if child extends base class
body: <p>I started with four components:</p>
  
  <ul>
  <li><code>UserListComponent</code></li>
  <li><code>UserSearchComponent</code></li>
  <li><code>GroupListComponent</code></li>
  <li><code>GroupSearchComponent</code></li>
  </ul>
  
  <p>Both list components reference their corresponding search component via a <code>ViewChild</code> decorated property.  For example, the <code>UserListComponent</code> has a property defined like:</p>
  
  <pre class="lang-js prettyprint-override"><code>@ViewChild(UserSearchComponent)
  userSearch: UserSearchComponent;
  </code></pre>
  
  <p>The two list components and search components were so similar with each other, I started looking into how to have components extend base classes so that I <strong>D</strong>id not <strong>R</strong>epeat <strong>M</strong>yself.  I started by creating a base class for the search components with the following declaration:</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'td-search',
    template: ''
  })
  export class SearchComponent&lt;T&gt; {
    ...
  }
  </code></pre>
  
  <p>Once I extended the two search components, my <code>ViewChild</code> references, in both cases, ended up returning <code>undefined</code>.  For example, here is the <code>UserSearchComponent</code>'s declaration after introducing the base class:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class UserSearchComponent extends SearchComponent&lt;UserSearch&gt; {
  </code></pre>
  
  <p><code>UserSearch</code> is just a class that wraps available search parameters as an object/payload to send off to the server.</p>
  
  <p>So the <code>ViewChild</code> properties work in both cases as long as I don't have a base class for the two search components.  But as soon as I introduce a base class, I can't seem to get a <code>ViewChild</code> reference of the types of the two search components.</p>
  
  <p>The error I get looks like this:
  <a href="https://i.stack.imgur.com/sk8eK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sk8eK.png" alt="enter image description here"></a></p>
  
  <p>...and I'm just trying to set a property on the search component once the results come back in the list component by calling this method:</p>
  
  <pre class="lang-js prettyprint-override"><code>private resetSearch() {
    this.loading = false;
    this.userSearch.disabled = false;
  }
  </code></pre>
  
  <h3>Question:</h3>
  
  <p>Can I use base classes with components I intend to use as <code>ViewChild</code> references?</p>
  
  <h3>Update:</h3>
  
  <p>I made the realization, too, that the <code>ViewChild</code> is NOT undefined at first... in <code>ngOnInit</code> of the <code>UserListComponent</code>, I am subscribing to a <code>searches</code> property of the <code>UserSearchComponent</code> (of type <code>EventEmitter&lt;UserSearch&gt;</code>).  This successfully finds the <code>UserSearchComponent</code> and I confirmed this by logging out the whole object right before making the subscription call:</p>
  
  <pre class="lang-js prettyprint-override"><code>console.log(this.userSearch);
  this.userSearch.searches.subscribe((search: UserSearch) =&gt; {
    this.loading = true;
    const params = new UserSearchQueryParams();
    params.Login = search.login;
    params.Username = search.user;
    params.EnabledOnly = search.enabled;
    this.users$ = this._users.getUsers(params).pipe(
      catchError(this.handleError),
      finalize(this.resetSearch)
    );
  });
  </code></pre>
  
  <p>In the <code>finalize</code> operator of the call to <code>getUsers</code> observable, I call <code>resetSearch</code> which is where <code>this.userSearch</code> is returning undefined.  So before I do the search, the search component child reference works, but after the search takes place, the list component's child reference to the search component doesn't work...</p>