In Angular using bootstrap open Popover

In my last article we discuss on how to use accordion in angular application. In these tutorial i discuss on how to use popover in Angular application.
First we need to add below line in our app.module.ts file.


...............
import { PopoverModule } from 'ngx-bootstrap';
............
@NgModule({
............
  imports: [
             PopoverModule.forRoot(),
             ...
           ]
})

After adding above lines in app.module.ts file we can use these in any component.
Basic example for the popover


<button type="button" class="btn"
        popover="First Popover Text">
Popover
</button>


import { Component } from '@angular/core';
 
@Component({
  selector: 'popover-basic',
  templateUrl: './popover.html'
})
export class PopoverBasicComponent {}

Default popover use top position to display. you can specify the position like ‘top’,’left’,’right’,’bottom’ need to pass as input in the html like below example.


<button type="button" class="btn"
        popover="Display at Top"
        placement="top">
Popover Top
</button>
<button type="button" class="btn"
        popover="Display in Left"
        placement="left">
Popover Left
</button>
<button type="button" class="btn"
        popover="Display in Right"
        placement="right">
Popover Right
</button>
<button type="button" class="btn"
        popover="Display in Bottom"
        placement="bottom">
Popover Bottom
</button>


import { Component } from '@angular/core';
 
@Component({
  selector: 'popover-basic',
  templateUrl: './popover.html'
})
export class PopoverBasicComponent {}

If you want to pass Popover Title then pass value in “popoverTitle” like below Example.


<button type="button" class="btn"
        popoverTitle="Title Popover"
        placement="right"
        popover="Content">
Popover
</button>


import { Component } from '@angular/core';
 
@Component({
  selector: 'popover-basic',
  templateUrl: './popover.html'
})
export class PopoverBasicComponent {}

You can Close on Next click using Focus trigger. You need to add ‘ triggers=”focus” ‘in tag. like below example.


<button type="button" class="btn"
        popoverTitle="Title Popover"
        placement="right"
        triggers="focus"
        popover="Content">
Popover
</button>


import { Component } from '@angular/core';
 
@Component({
  selector: 'popover-basic',
  templateUrl: './popover.html'
})
export class PopoverBasicComponent {}

Spread the love

Education For Betterment

About The Author

Jugal Rana

Related Posts

About The Author