Close button for ngb-alert is not working

Question

I am working on my web page and I am using a ngb-alert component to show the user an alert when they first login. I have got the alert working just fine. However, I have noticed that the close button is jacked up and I have not been able to figure out why.

Here are some code snippets that I am working with:

**HTML COMPONENT**

<span>
    <ngb-alert type="primary" (close)="close()" [dismissible]="dismissible"> {{errorMessage}}</ngb-alert>
</span>


**TYPESCRIPT COMPONENT**

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-ngbd-error-message',
  templateUrl: './error-message.component.html',
  styleUrls: ['./error-message.component.less']
})

export class NgbdErrorMessageComponent {
  @Input() errorMessage: string;
  @Input() close: () => void;
  @Input() dismissible = true;
}

**LESS STYLING**
@import url('../../../global-less/color-variables.less');

:host {
  width: 100%;
  height: 100%;
}
:host .alert {
  margin: 0;
}
:host .alert-dismissible .close {
  padding: .6rem 1rem;
}

the class on for the button within the ngb-alert seems to be btn-close. Here is the rendered html element from within the webpage

<ngb-alert _ngcontent-ng-c2763413438="" role="alert" type="primary" ng-reflect-type="primary" ng-reflect-dismissible="true" class="alert alert-primary show fade alert-dismissible">Amidst a cascade of sparkling emerald leaves, the whimsical hedgehog orchestrated a symphony with a violin.<button type="button" aria-label="Close" class="btn-close"></button><!--bindings={ "ng-reflect-ng-if": "true" }--></ngb-alert>

Here is the Rendered styles top to bottom

First Picture of Styles

Second Picture of Styles

Here is what it looks like on the webpage:

Picture of Component

Here is what I am using

• angular- 16.2.2

• ngboostrap - 15.0.1

I have looked into

1. Overlapping Styles
2. Incorrect version of ngbootstrap
3. Missing dependencies

Answer 1

I finally got it working by upgrading my project's Bootstrap. My ng-boostrap and Bootstrap versions were out of line and resulted in some conflicts

Answer 2

The "Output" in ngb-alert" is "closed" not "close"

<ngb-alert type="primary" 
           (closed)="close()" 
           [dismissible]="dismissible">
   {{errorMessage}}
</ngb-alert>

BTW, instead use an @Input that makes that in your parent you need to have some like

//In parent
    <app-ngbd-error-message errorMessage='hi, error' [close]="close">
       </app-ngbd-error-message>

  close()
  {
    console.log("hi")
  }

You can use @Output in your component

//Your component
  @Output() close:EventEmitter<void>=new EventEmitter<void>()

<ngb-alert type="primary" (closed)="close.emit()" [dismissible]="dismissible"> 
           {{errorMessage}}
</ngb-alert>

//And in your parent

<app-ngbd-error-message errorMessage='hi, error' 
       (close)="close()">
</app-ngbd-error-message>

NOTE: Don't forget in your .css include the bootstrap.min.css (or the scss of the bootstrap)

a stackblitz

Update the button close have as class bt-close. This it's well defined in boostrap.min.css. We can also get in the own page of the boostrap

.btn-close:hover {
    color: #000;
    text-decoration: none;
    opacity: .75;
}
.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.25rem 1rem;
}
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: .375rem;
    opacity: .5;
}