CODEWITHSUNDEEP
angularbootstrap-4
PacMan Programador
PacMan Programador

Reputation: 200

how to customize ng-bootstrap alert

it's the first time I use ng-bootstrap, and I want to know how to customize an alert, I saw the example but it doesn't work for me

This is my code

app.component.html

<ngb-alert type="custom" [dismissible]="false"><strong>Whoa!</strong> This is a custom alert.</ngb-alert>

alert-custom.ts

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

@Component({
  selector: 'ngbd-alert-custom',
  templateUrl: './app.component.html',
  styles: [`
    :host >>> .alert-custom {
      color: #99004d;
      background-color: #f169b4;
      border-color: #800040;
    }
  `]
})
export class NgbdAlertCustom {}

alert-custom.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { NgbdAlertCustom } from './alert-custom';

@NgModule({
  imports: [BrowserModule, NgbModule],
  declarations: [NgbdAlertCustom],
  exports: [NgbdAlertCustom],
  bootstrap: [NgbdAlertCustom]
})
export class NgbdAlertCustomModule {}

main.ts

import './polyfills';

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { NgbdAlertCustomModule } from "./app/NgbdAlertCustomModule";

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
platformBrowserDynamic().bootstrapModule(NgbdAlertCustomModule)
  .catch(err => console.error(err));

when using this code you only see the text of the alert, without any decoration

Upvotes: 1

Views: 2547

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15031

Unable to replicate the issue which you faced with the attached code...

Attached is the stackblitz which works with the code you provided

relevant app.component.html:

<ngb-alert type="custom" [dismissible]="false"><strong>Whoa!</strong> This is a custom alert.</ngb-alert>

relevant alert-custom.ts:

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

@Component({
  selector: 'ngbd-alert-custom',
  templateUrl: './app.component.html',
  styles: [`
    :host >>> .alert-custom {
      color: #99004d;
      background-color: #f169b4;
      border-color: #800040;
    }
  `]
})
export class NgbdAlertCustom {}

Upvotes: 1

Related Questions