Angular: Hide component from controller

Question

So I'm knew to AngularJS(1.6.4). 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.

Right now, my controller looks like so with a service call. When the data returns, I would like to run my hide/show logic:

<div id="container" class="flex-container"><!-- flex container -->
  <div class="box" id="redbox" class="flex-item"><!-- flex item -->
    <input id="searchTermInput" class="search-input">
  </div>

  <div class="box" id="greenbox" class="flex-item"><!-- flex item -->
    <button id="searchButton" class="search-button" (click)="runSearch($event)">
    Search
    </button>
  </div>
  <hr width="100%" class="divider-line" ng-hide="dividerHider">
  <div class="flex-item search-results">
    <ul class="heroes">
      <li *ngFor="let result of searchResults">
        <span class="badge">{{result.id}}</span> {{result.title}}
      </li>
    </ul>
  </div>
</div>

.

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 => {
    this.searchResults = searchResults;
    alert("Hello! I am an alert box!!" + this.searchResults.length);

    //Call hide component here
  }
)
}

}

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

AngularJS: ng-show / ng-hide

and here

AngularJS - ng-hide with different ng-controller

I'm totally at a loss as to where that code concerning "$scope" is supposed to go.

Any help is greatly appreciated.

EDIT: Solution

I ended up using this construct.

...
<hr width="100%" id="divider" class="divider-line" *ngIf="showDivider">
...

export class AppComponent {
  showDivider = false;

  runSearch(ev): void {

    this.searchResultService.getHeroesSlowly().then(searchResults => {
        this.showDivider = true;
      }
    )
  }
}

Answer 1

It seems that your issue is how to use angular 1.6 with ES6. Perhaps this blog will help you to get better understanding on how to construct scopes for your components with es6.

https://nazargargol.com/scope-watch-with-angular-es6-class/

For the task at hand, I can speculate (I've not been using es6 syntax, and you don't have codepen sample to play with), that changing your code to:

this.searchResultService.getHeroesSlowly().then(searchResults => {
    this.searchResults = searchResults;
    alert("Hello! I am an alert box!!" + this.searchResults.length);

    //Call hide component here
    this.scope.show_results = true;
  }
)

And your html to:

<div class="flex-item search-results" ng-show="show_results">
    <ul class="heroes">
      <li *ngFor="let result of searchResults">
        <span class="badge">{{result.id}}</span> {{result.title}}
      </li>
    </ul>
  </div>

Should do the trick ( providing, ofc, that empty scope is created by default when the component is constructed, and you can add 'search_results' to it).

In general, ng-hide, ng-show, ng-if are using variables/methods that are defined in $scope, so you need to construct correct scope.

Answer 2

You could add a variable statement, for example this.show_search = true; from the angular code the first time the html content loads. Then into the searchResults you could change this variable (if it is readable from the same js angular code) when you want it to change. I am talking about something like below (let's say you want to hide the search div):

<div class="box" id="redbox" class="flex-item" ng-show="show_search">
   <input id="searchTermInput" class="search-input">
</div>

And then inside the runSearch() function change this var to this.show_search = false;. Then the html content you want to hide will not appear.

Another sulution is just to check if the object searchResults exists and according to that show your content or not:

<div class="box" id="redbox" class="flex-item" ng-hide="searchResults">
   <input id="searchTermInput" class="search-input">
</div>

Last Solution: You could also, initialize your variable into the html content (in case the first time that you html content load does not communicate with the same angular code after the search) and then use it the same way as at the first solution. Like below:

<div id="container" class="flex-container" ng-init="show_search=true">
   <div class="box" id="redbox" class="flex-item" ng-show="show_search">
      <input id="searchTermInput" class="search-input">
   </div>
   .....
</div>

There might be differences from my method to your code, in case it doesn't work, but that's the main idea. So you could check how to adjust it to your structure. Check also if your html content communicates with an appropriate js angular controller except the service. This will make your life easier regarding the setup of new functions and variables too.

Of course, you could use jquery, and read your id from the html content and just hide it: $("#searchTermInput").hide();