Open and close ng-bootstrap alert component (ngb-alert)

Consider the following StackBlitz:

AlertComponent

As we can see we have two buttons that make show or hide the alert. The problem is that when closing the alert through the symbol to close (X), the alert does not show again even if you press the false button. To get to show the alert again, I have to press the button true and then the button false so that this alert will be shown again. Why is this happening? I would like an explanation. Thank you!

2 Answers
2

The staticAlertClosed flag of the inner component is an input, but the inner component changes its value so

false

false

false

true

false

false

true

true

true

false

false

In short: don't modify the value of an input from the component receiving that input. Only the parent component should modify the input value. To fix this, you could use bidirectional binding.
Here's a demo.

I have found an issue. When you click on exit sign inside AlertComponent you only trigger a change in staticAlertClosed variable, but you do not change the value of variable in AppComponent.

There are several ways to fix it, but here is what I have done.

Stackblitz link - https://stackblitz.com/edit/angular-to9vlk-nyog3i?embed=1&file=app/app.component.html

I have hooked the output event with variable in AppComponent. See the source code for more information

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.