angular bootstrap - Popover shown & hidden event

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  message:String = '';

  onShown(){
    this.message = "Poppover now visible";
  }

  onHidden(){
    this.message = "Popover now hidden";
  }
}

app.component.html

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - Popover shown and hidden event
</h4>

<h5>{{message? message : 'Events message'}}</h5>
<br/>

<button 
  placement="bottom-start"
  (shown)="onShown()"
  (hidden)="onHidden()"
  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 Visibility Events">
  Open Popover
</button>

More Angular tutorials

• angular - Property binding example
• angular - How to use if else condition
• angular - How to use then else condition
• angular - How to use if then condition
• angular - How to use if statement
• angular - Loop through an array of objects
• angular - How to use nested loop
• angular - How to use Button click event
• angular - How to call function on Button click
• angular - How to use ternary operator
• angular - How to generate random number
• angular bootstrap - Popover with HTML content
• angular bootstrap - How to delay Popover open close
• angular bootstrap - Popover manual triggers
• angular bootstrap - Popover custom CSS class