title: Toggling the visibility of a component with an Input function in Angular
body: <p>I have a component that accepts a callback function <code> @Input() closeCallback: () =&gt; void;</code></p>
  <p>and calls it in a close function like this :</p>
  <pre><code>  close() {
      this.closeCallback();
    }
  </code></pre>
  <pre><code>&lt;button class=&quot;close&quot; (click)=&quot;close()&quot;&gt;
          &lt;img src=&quot;assets/img/share/icon_close_dark.svg&quot; /&gt;
      &lt;/button&gt;
  </code></pre>
  <p>So in the parent component I passed a function to it :</p>
  <pre><code>&lt;ng-container  *ngIf=&quot;isPopupOpen&quot;&gt;
  &lt;e2-fullscreen-popup
    [title]=&quot;'top promotions'&quot;
    [closeCallback]=&quot;closePopup&quot;
    &gt;
  ...
  &lt;/e2-fullscreen-popup&gt;
  &lt;/ng-container&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>  closePopup() {
     
      this.isPopupOpen = false;
      console.log('this.isPopupOpen',this.isPopupOpen);
    }
  </code></pre>
  <p>so why I'm not able to remove  the component when clicking on the button, even thou the logs themselves show that <code>this.isPopupOpen</code> is false?</p>