skip to Main Content

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

2

Answers


  1. Chosen as BEST ANSWER

    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


  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;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search