title: Angular 4 show popup onclick by other component
body: <p>i'm struggling about this problem and can't figure out.
  I simply need to show a popup div situated in the page clicking from a menu entry in my navbar.component. </p>
  
  <p>I added a property "show" in my popup which prints the "show" class on my div using the ngClass (with if) directive. I can get this working if the action button is <strong>inside</strong> my popup component but i cannot print the show class clicking on another component. The property in the Object get updated but the class is not printed. I'm using angular 4 with ng-bootstrap. I tried both with services and with parent/child emit event.</p>
  
  <p>This is is my situation:</p>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;app-nav-bar&gt;&lt;/app-nav-bar&gt;
  &lt;app-login&gt;&lt;/app-login&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;app-footer&gt;&lt;/app-footer&gt;
  </code></pre>
  
  <p><strong>navbar.component.html</strong></p>
  
  <pre><code>...
   &lt;button class="dropdown-item" (click)="showPopup()"&gt;LOGIN&lt;/button&gt;
  ...
  </code></pre>
  
  <p><strong>navbar.component.ts</strong></p>
  
  <pre><code>import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
  
  @Component({
      moduleId: module.id,
      selector: 'app-nav-bar',
      templateUrl: 'navbar.component.html',
      styleUrls: ['./navbar.component.css'],
  })
  
  export class NavbarComponent implements OnInit {
      @Output() show = new EventEmitter&lt;boolean&gt;();
  
      ngOnInit() {
      }
  
  
      showPopup() {
          this.show.emit(true);
      }
  }
  </code></pre>
  
  <p><strong>login.component.html</strong></p>
  
  <pre><code>&lt;div id="wrapper-login-popup" class="fade-from-top" [(class.show)]="show"&gt;
      &lt;div id="container-login-popup"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-12 text-center"&gt;
                  &lt;img id="popup-bomb" src="assets/images/bomb.png" alt="bomb"/&gt;
                  &lt;img id="popup-close" class="close-icon" src="assets/images/close.png" alt="close"
                       (click)="closePopup()"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>login.component.ts</strong></p>
  
  <pre><code>import {Component, Input, OnInit} from '@angular/core';
  import {AuthService} from '../services/auth.service';
  import {IUser} from './user';
  
  @Component({
      selector: 'app-login',
      templateUrl: 'login.component.html',
      styleUrls: ['login.css']
  })
  
  export class LoginComponent implements OnInit {
      private username: string;
      private password: string;
  
      @Input() show: boolean = false;
  
      constructor(private AuthService: AuthService) {
      }
  
      ngOnInit() {
      }
  
      login() {
          ...
      }
  
      showPopup() {
          console.log(this); //Show is false
          this.show = true;
          console.log(this); //Show is true but does not trigger the show class
      }
  
      closePopup() {
          this.show = false;
      }
  }
  </code></pre>