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

Asked

Viewed 516 times

1

From a button inside the header component I am calling a modal of Angular Material, in this modal has a button enter, I would need that when clicking this button a component called banner was 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">
  Entrar
  <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 ou número de telefone" />
          <p class="alert">Informe um e-mail ou número de telefone válido.</p>
        </td>
      </tr>
      <tr>
        <td colspan="2">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2">
            <input type="password" placeholder="Senha" />
            <p class="alert">A senha deve ter entre 4 e 60 caracteres.</p>
        </td>
      </tr>
      <tr>
          <td colspan="2">&nbsp;</td>
        </tr>
      <tr>
        <td colspan="2">
          <button class="enter">Entrar</button>
        </td>
      </tr>
      <tr>
        <td class="remember">
            <mat-checkbox>Lembrar de mim</mat-checkbox>
        </td>
        <td class="help">
          <a href="javascript:void">Precisa de ajuda?</a>
        </td>
      </tr>
      <tr>
        <td colspan="2">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2">
          <p class="title">Novo por aqui?</p>
          <button class="buy">Assine agora!</button>
        </td>
      </tr>
    </table>
  </form>

This is the project link: https://stackblitz.com/edit/angular-ewo6xo

Could someone please help me?

angular
  • 1

    you can use a property-based ngIf.

  • Can you give me an example please?

  • Is there a link I can see?

  • If you want to hide it you can use jquery to add display:None to the style in the button click event

1 answer

-1

To solve this you will need to make an Eventemitter for the parent component, where the app-header and app-banner components are inserted.

The Eventemitter manages to externalize, through Biding Event(in your case of the button) information to the parent Component. With this you can use ngIf to control the banner display.

Here you can see how to use the Eventemitter

  • 1

    All right Anderson! I entered the link of the project structure, can you please demonstrate what you wrote in the code? I started studying Angular a few days ago.

  • 1

    Man, it’s hard to move the code. Even without moving I saw that the code is breaking. In addition, you are using Jquery to control the logic of the Components. The angular is fully capable of managing resources without the need for Jquery. You can start by taking a look at the concept of Property and Event Binding. This will totally eliminate your Jquery code in the components.

  • I put the code just to illustrate what should be done, not complete, so it breaks. So I’m a web designer, I know a lot about jQuery, so I implemented some little things with it.

  • Could you please enter the codes so I can study them?

  • I’ll assemble a mini project and put it in Git for you to take a look. As soon as I finish I put the link here

  • thank you very much Anderson! I am waiting

  • Check out this project: https://github.com/macedo123/ProjetoAngular1.git

  • Let’s go continue this discussion in chat.

Show 3 more comments

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.