How to hide a component in Angular 7 when clicking a button inside a modal?

Question

From a button inside the header component I am calling a modal of the Angular Material, in this modal has a button enter, I would need that when clicking this button a component called banner would be hidden.

my app.component.html has this structure:

<app-header></app-header>
<app-banner></app-banner>

modal.component.html has this structure:

<p class="title">
  Enter
  <span class="close" mat-raised-button (click)="save()"><i class="fas fa-times-circle"></i></span>
</p>
  <form class="dialog-enter">
    <table>
      <tr>
        <td colspan="2">
          <input type="text" placeholder="E-mail or phone number" />
        </td>
      </tr>
      <tr>
        <td colspan="2">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2">
            <input type="password" placeholder="Password" />
        </td>
      </tr>
      <tr>
          <td colspan="2">&nbsp;</td>
        </tr>
      <tr>
        <td colspan="2">
          <button class="enter">Enter</button>
        </td>
      </tr>
      <tr>
        <td class="remember">
            <mat-checkbox>Remember me</mat-checkbox>
        </td>
        <td class="help">
          <a href="javascript:void">Need help?</a>
        </td>
      </tr>
      <tr>
        <td colspan="2">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2">
          <p class="title">New for here?</p>
          <button class="buy">Buy now!</button>
        </td>
      </tr>
    </table>
  </form>

Answer 1

One way of doing this is with ngIf and bind this to a variable. NgIf only shows the element if the code you give it evaluates to true. For instance, you can use a variable called showBanner.

Your html would look like:

<app-header></app-header>
<app-banner *ngIf="showBanner === true"></app-banner>

This will only show your app-banner when showBanner === true.

Then in your app.component.ts you want to have a property called showBanner and initialize that to true (assuming you want the banner to be shown by default).

In your modal.component.ts you can add an EventEmitter (I will call it submit for simplicity) that will tell anyone who subscribes to it that enter was hit. At the beginning of your ModalComponent class you can create a property called submit and initialize it like:

submit = new EventEmitter()

then inside of your save method that is called when the user clicks enter you can emit an event so subscribers no it was clicked:

save() {
   this.submit.emit(true);
}

Then back in your app.component.ts where I believe you are opening your dialog you can also subscribe to the submit event. Once an event is emitted from the modal you can set showBanner to true. You want to do this in the same method you are opening your dialog but after dialog.open:

const self = this;
dialog.componentInstance.submit.subscribe({
   next(value) {
      self.showBanner = false;
   }
});

For future posts it will be easier to answer questions if you showed the code for all files involved. In this case app.component.ts and model.component.ts would be helpful for people trying to help you answer the question instead of having to create something from scratch themselves. If you update your post with the additional info I or someone else may be able to leave a better answer. I am new to answering questions so this is new to me as well. Hope this helps.

You can use Input/Output to share data from a child component to a parent component. In this scenario you want to use Output. The stackblitz has been updated to use output from the header component.

Here is a stackblitz I just made of a simple project that I think is similar to the one you are talking about Stackblitz