Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
ngb-alert close button
See original GitHub issueBug description:
If you set the innerHTML for <ngb-alert>, it overwrites the close button when you have dismissible enabled. Would it be possible to append the close button to innerHTML? I’m trying to set dynamically styled alert messages.
Link to minimally-working StackBlitz that reproduces the issue:
Versions of Angular, ng-bootstrap and Bootstrap:
Angular: 9.1.1
ng-bootstrap: 6.1.0
Bootstrap: 4.4.1
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Alert - Angular powered Bootstrap
The close button (×) will be displayed and you can be notified of the event with the (close) output. Type: boolean. Default value:...
Read more >ng-bootstrap alerts won't close
My alerts won't close when I click the X button. I've used angular cli to create a new app. I followed the instructions...
Read more >Angular ng Bootstrap Alert Component
Approach: First, install the angular ng bootstrap using the above-mentioned command. Import ng bootstrap module in module.ts import { NgbModule } ...
Read more >ng-bootstrap Alert - P N V R K Prasad - WordPress.com
Show a self-closing success message that disappears after 5 seconds. </p> <ngb-alert *ngIf=”successMessage” type=”success” (close)=”successMessage = null”> ...
Read more >Bootstrap alert auto close- free examples & tutorial.
Responsive alert auto close built with Bootstrap 5. Automatically close each alert at different time periods.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
If you’re curious, this explains what I was trying to do: Stackoverflow
Thank you, appreciate you looking into this!
This is the expected behaviour.
innerHTMLis going against Angular itself. Angular does provide a templating engine, engine in charge of generating DOM nodes, maintaining them up to date with the model updates. Using[innerHTML]is basically and literally short-circuiting all of that!So you can’t expect it to be working. As a side note, I am still not clear about what you are trying to do with it.
So I’ll close this issue for now as there is not that much to be fixed. Don’t hesitate to ask questions on Stack Overflow also, it could be a great help with proper tags.