• Stars
    star
    202
  • Rank 193,691 (Top 4 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An angular 15.0+ bootstrap confirmation popover

Angular confirmation popover

Sponsorship CI codecov npm version Twitter Follow

Demo

https://mattlewis92.github.io/angular-confirmation-popover/

Table of contents

About

A simple angular 15.0+ directive to display a bootstrap styled confirmation popover when an element is clicked.

AngularJS 1.x version

Installation

  1. Install through npm:
npm install angular-confirmation-popover
  1. Install bootstrap (both v3 and v4 are supported). If not using bootstrap you could implement the popover styles yourself.

  2. Add the NgModule:

import { NgModule, Component } from '@angular/core';
import { ConfirmationPopoverModule } from 'angular-confirmation-popover';

@NgModule({
  declarations: [MyComponent],
  imports: [
    ConfirmationPopoverModule.forRoot({
      confirmButtonType: 'danger', // set defaults here
    }),
  ],
  bootstrap: [MyComponent],
})
class MyModule {}
  1. Now use it within your component
@Component({
  selector: 'my-component',
  template: ` <button class="btn btn-outline-secondary" mwlConfirmationPopover [popoverTitle]="popoverTitle" [popoverMessage]="popoverMessage" placement="left" (confirm)="confirmClicked = true" (cancel)="cancelClicked = true">Click me!</button> `,
})
class MyComponent {
  popoverTitle = 'Popover title';
  popoverMessage = 'Popover description';
  confirmClicked = false;
  cancelClicked = false;
}

You may also find it useful to view the demo source.

Documentation

All documentation is auto-generated from the source via compodoc and can be viewed here: https://mattlewis92.github.io/angular-confirmation-popover/docs/

The main mwlConfirmationPopover directive options can be viewed here.

Development

Prepare your environment

  • Install Node.js
  • Install pnpm: corepack enable
  • Install local dev dependencies: pnpm install while current directory is this repo

Development server

Run pnpm start to start a development server on port 8000 with auto reload + tests.

Testing

Run pnpm test to run tests once or pnpm test:watch to continually run tests.

Release

pnpm release

License

MIT

More Repositories

1

angular-calendar

A flexible calendar component for angular 15.0+ that can display events on a month, week or day view.
TypeScript
2,720
star
2

angular-bootstrap-calendar

A port of the bootstrap calendar widget to AngularJS (no jQuery required!)
JavaScript
798
star
3

angular-resizable-element

An angular 15.0+ directive that allows an element to be dragged and resized
TypeScript
314
star
4

webpack-retry-chunk-load-plugin

A webpack plugin to retry loading of chunks that failed to load
TypeScript
236
star
5

karma-coverage-istanbul-reporter

A karma reporter that uses the latest istanbul 1.x APIs to report coverage
JavaScript
163
star
6

angular-draggable-droppable

Observable powered drag and drop for angular 15.0+
TypeScript
134
star
7

angular2-tv-tracker

A simple TV app for learning angular 2+
TypeScript
127
star
8

angularx-flatpickr

An angular 17.0+ wrapper for flatpickr
TypeScript
88
star
9

angular-bootstrap-confirm

Displays a bootstrap confirmation popover (with no jQuery or bootstrap JS!)
JavaScript
88
star
10

angular-gauge

A tiny angular 15.0+ wrapper for https://github.com/naikus/svg-gauge
TypeScript
80
star
11

angular-bluebird-promises

Replace the default angular $q service with the bluebird promise library for enhanced promises within your angular app!
JavaScript
74
star
12

generator-angular-library

A yeoman generator for scaffolding a new angular 5 module that you can publish and share straight away to npm
TypeScript
65
star
13

angular-text-input-highlight

A component that can highlight parts of text in a textarea. Useful for displaying mentions etc
TypeScript
55
star
14

angular-text-input-autocomplete

A angular 6+ directive for adding autocomplete functionality to text input elements, built around composability
TypeScript
45
star
15

calendar-utils

Utility functions to generate views for calendars
TypeScript
38
star
16

webpack-filter-warnings-plugin

Allows you to hide certain warnings from webpack compilations
TypeScript
27
star
17

cordova-plugin-is-debug

A cordova plugin to detect if the app is running in debug mode or not
Java
20
star
18

angular-async-cache

A simple utility to help with caching of promises and observables to enable an easy offline first approach in angular 6+ apps
TypeScript
20
star
19

angular-highlight-js

Highlight.js integration for angular 4.0+
TypeScript
9
star
20

js-to-typescript-codemod

A simple codemod for helping migrate from babel to typescript. Converts default imports to wildcards.
JavaScript
8
star
21

positioning

The ng-bootstrap Positioning class as a standalone module
TypeScript
4
star
22

bless-css-webpack-plugin

A webpack plugin for bless CSS
JavaScript
4
star
23

webpack-angular-externals

A tiny utility to prevent webpack bundling @angular dependencies in your library code
JavaScript
3
star
24

create-plunker

A helper utility to create plunkers
TypeScript
2
star
25

material-theme-test

1
star
26

docker-nodejs-chrome

A docker container for installing node.js and google chrome
1
star
27

mattlewis.me

The source code for my personal website
HTML
1
star
28

node-mr-bump

Bumps your apps manifest files version
JavaScript
1
star
29

mwl-technologies.co.uk

TypeScript
1
star
30

angular-15-angular-calendar

TypeScript
1
star
31

tslint-config-mwl

The TSLint config that I use across all projects. Should be used in conjunction with angular + prettier
1
star
32

angular-calendar-ng16-test

HTML
1
star
33

webpack-date-fns-externals

A tiny utility to prevent webpack bundling date-fns imports in your library code
JavaScript
1
star
34

angular-async-tracker

A port of angular-promise-tracker to angular 6+ that also supports observables
TypeScript
1
star
35

api.mattlewis.me

A very simple REST API used by my personal website. Uses native ES6 and a couple of babel transforms for unsupported native features.
JavaScript
1
star
36

generate-date-fns-typings

A script to auto create typescript definitions for the date-fns library from the docblock comments
JavaScript
1
star