---
title: "Angular Popup Opening closing the popup Example | Mobiscroll"
component: "Popup"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/popup/showing-the-popover"
---
# Opening closing the popup - Angular Popup demo
Angular popup & modal that can be used for various supporting roles, like event/add edit dialogs, info boxes & more.
- [Live demo](https://demo.mobiscroll.com/angular/popup/showing-the-popover)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/pickers/popup/showing-the-popover)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/popup/showing-the-popover.md), [jQuery](https://demo.mobiscroll.com/jquery/popup/showing-the-popover.md), [React](https://demo.mobiscroll.com/react/popup/showing-the-popover.md), [Vue](https://demo.mobiscroll.com/vue/popup/showing-the-popover.md)
## Description
Use the popup to render any content or form in a modal box that can be programmatically shown or hidden. For that the `open` and `close` methods can be used.
To check whether the popup is opened or not, use the [`isVisible`](https://mobiscroll.com/docs/angular/popup/api#method-isVisible) method.
## What this demo shows
- This demo shows a popup which can be opened and closed with buttons.
- **Opening and closing** Buttons programmatically open and close the popup.
- **Modal layout** The popup appears as a centered modal with a custom layout and content.
- **Custom content** The popup contains a custom image or logo, a heading, and descriptive text.
- **Close action** A Close button dismisses the popup.
- **Visual separation** A modal overlay and shadow separate the popup from the underlying content.
## Best for
- **Welcome messages** Present introductory content when users enter a page or workflow.
- **Announcements** Display important updates or notices in a focused modal.
- **Confirmations** Ask users to acknowledge information or confirm an action.
- **Promotional content** Highlight a promotion with custom imagery and supporting text.
- **Custom modal interactions** Present focused content that users can dismiss before returning to the underlying page.
## Tutorial
```html
Open popup
Close
```
```ts
openPopup(): void {
this.popup.open();
}
closePopup(): void {
this.popup.close();
}
```
## API used in this demo
- [`theme`](https://mobiscroll.com/docs/angular/popup/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/popup/api#opt-themeVariant) - option
- [`display`](https://mobiscroll.com/docs/angular/popup/api#opt-display) - option
## Code
### Component
```ts
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { MbscModule, MbscPopup, MbscPopupOptions, setOptions } from '@mobiscroll/angular';
setOptions({
theme: 'ios',
themeVariant: 'light'
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {
@ViewChild('popup', { static: false }) popup!: MbscPopup;
popupOptions: MbscPopupOptions = {
display: 'center',
};
openPopup(): void {
this.popup.open();
}
closePopup(): void {
this.popup.close();
}
}
```
### Template
```html
Open popup
Welcome to our website!
Have fun navigating through the demos.
Close
```
## Implementation notes
- The popup is opened and closed with the `.open()` and `.close()` instance methods - there is no option that shows the popup on init; visibility is always driven by calling these methods.
- `isVisible` (a method on the popup instance) returns whether the popup is currently open, for cases where code needs to check state rather than react to the `onOpen`/`onClose` events.
- `display: 'center'` renders the popup as a centered modal (used in this demo); `showOverlay: false` removes the dimmed backdrop that normally sits behind the popup; `closeOnOverlayClick: false` prevents clicking outside the popup from dismissing it, so the `Close` button is the only way to dismiss it.
- `focusOnOpen: false` prevents the popup from auto-focusing its first focusable element when it opens.
- Opening/closing is imperative everywhere except React and Vue: JS captures the popup instance directly from the return value of `mobiscroll.popup(...)`; jQuery instead calls `.mobiscroll('getInst')` once to get it; either way, `.open()`/`.close()` is then called on it from the trigger/close buttons' click handlers. Angular keeps a template reference (`#popup`) resolved via `@ViewChild('popup') popup!: MbscPopup`, with component methods calling `this.popup.open()`/`this.popup.close()`.
- React and Vue instead bind the popup's visibility declaratively: a boolean state (`isPopupOpen`) is passed as the `isOpen`/`:isOpen` prop, the trigger button's click handler sets it to `true`, and both the popup's `onClose`/`@close` callback and the in-popup Close button's click handler set it back to `false` - there is no direct `.open()`/`.close()` call in these two frameworks for this pattern.
- Content placed inside the popup (image, heading, paragraph, Close button) is rendered as children of ``/``/`` in React/Vue/Angular, or as the markup inside the target container element (`
`) that `.popup()` is initialized on in JS/jQuery.
## Run it in your project
1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).
2. Clone the repository:
```
git clone https://github.com/acidb/mobiscroll-demos-angular.git
```
3. If not installed yet, install the Mobiscroll CLI from NPM:
```
npm install -g @mobiscroll/cli
```
4. Config Mobiscroll - open a terminal window in the root directory and run:
```
mobiscroll config angular
```
5. Install dependencies - open a terminal window in the root directory and run:
```
npm install
```
6. Run the project:
```
ng serve
```
On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.
Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation
## Related demos
- Next: [Understanding display modes](https://demo.mobiscroll.com/angular/popup/mobile-desktop-display.md) - Angular popup, modal for mobile/desktop with top, bottom, popup, center, modal, anchored positioning.
