title: Angular: Hide component from controller
body: <p>So I'm <del>k</del>new to Angular<del>JS(1.6.4).</del>  I have a component that I would like to hide/show programmatically using the controller.  Unfortunately, I don't understand how to grab hold of my component, and then set the ng-hide to false.</p>
  
  <p>Right now, my controller looks like so with a service call.  When the data returns, I would like to run my hide/show logic:</p>
  
  <pre><code>&lt;div id="container" class="flex-container"&gt;&lt;!-- flex container --&gt;
    &lt;div class="box" id="redbox" class="flex-item"&gt;&lt;!-- flex item --&gt;
      &lt;input id="searchTermInput" class="search-input"&gt;
    &lt;/div&gt;
  
    &lt;div class="box" id="greenbox" class="flex-item"&gt;&lt;!-- flex item --&gt;
      &lt;button id="searchButton" class="search-button" (click)="runSearch($event)"&gt;
      Search
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;hr width="100%" class="divider-line" ng-hide="dividerHider"&gt;
    &lt;div class="flex-item search-results"&gt;
      &lt;ul class="heroes"&gt;
        &lt;li *ngFor="let result of searchResults"&gt;
          &lt;span class="badge"&gt;{{result.id}}&lt;/span&gt; {{result.title}}
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>.</p>
  
  <pre><code>import { Component } from '@angular/core';
  import {SearchService} from "./search.service";
  import {SearchResult} from "./search-result";
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [SearchService]
  })
  export class AppComponent {
  title = 'app';
  searchResults: SearchResult[];
  constructor(private searchResultService: SearchService) { }
  runSearch(ev): void {
  var q = 100;
  
  this.searchResultService.getHeroesSlowly().then(searchResults =&gt; {
      this.searchResults = searchResults;
      alert("Hello! I am an alert box!!" + this.searchResults.length);
  
      //Call hide component here
    }
  )
  }
  </code></pre>
  
  <p>}</p>
  
  <p>I've done my research on hiding things programmatically, but their code doesn't seem to use the controller very much at all.  For example, in this response here</p>
  
  <p><a href="https://stackoverflow.com/questions/12599637/angularjs-ng-show-ng-hide">AngularJS: ng-show / ng-hide</a></p>
  
  <p>and here</p>
  
  <p><a href="https://stackoverflow.com/questions/22694536/angularjs-ng-hide-with-different-ng-controller">AngularJS - ng-hide with different ng-controller</a></p>
  
  <p>I'm totally at a loss as to where that code concerning "$scope" is supposed to go.</p>
  
  <p>Any help is greatly appreciated.</p>
  
  <p>EDIT: Solution</p>
  
  <p>I ended up using this construct.</p>
  
  <pre><code>...
  &lt;hr width="100%" id="divider" class="divider-line" *ngIf="showDivider"&gt;
  ...
  
  export class AppComponent {
    showDivider = false;
  
    runSearch(ev): void {
  
      this.searchResultService.getHeroesSlowly().then(searchResults =&gt; {
          this.showDivider = true;
        }
      )
    }
  }
  </code></pre>