Skip to main content

angular bootstrap - Popover custom CSS class

app.component.ts 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  encapsulation: ViewEncapsulation.None,
  styles: [`
    .popover-custom-css-class{
      border:Navy 2px solid;
    }
    .popover-custom-css-class .popover-header{
      background:Crimson;
      color:Snow;
    }
    .popover-custom-css-class .popover-body{
      background:LightSeaGreen;
      color:White;
    }
  `]
})


export class AppComponent {}
app.component.html 

<h4 style="padding-top:25px; padding-bottom:40px;">
  Angular Bootstrap - Popover custom CSS class
</h4>

<button 
  placement="end-top"
  popoverClass="popover-custom-css-class"
  ngbPopover="Lorem ipsum dolor sit amet,
    consectetur adipiscing elit.
    Vivamus eget sodales justo.
    Donec eu condimentum nibh, eu congue mi.
    Phasellus malesuada ipsum sit amet faucibus placerat." 
  popoverTitle="Popover Custom CSS Class">
    Open popover
</button>
More Angular tutorials
Labels: