An Angular dialog box component that makes use of the HTML <dialog> element for improved accessibility.

• Keyboard/touch accessible
• Easily styled with CSS variables
• Use CSS transforms to customize open/close transitions

Install into your Angular project using NPM.

npm install raven-dialog --save

Import the DialogModule into your module.

import { DialogModule } from 'raven-dialog';

@NgModule({
  imports: [
    DialogModule,
    // ...
  ],
  // ...
})
export class AppModule { }

Add a <raven-dialog> element to your template, and open or close it by binding a variable to the open attribute.

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

@Component({
  selector: 'app-root',
  template: `
    <raven-dialog heading="Sample Title"
      [(open)]="isOpen"
      [modal]="true">
      <p>Dialog box content here.</p>
    </raven-dialog>
  `,
  styles: []
})
export class AppComponent {
  isOpen = false;
}

CSS variables are used for styling. Example:

raven-dialog {
  --dialog-border: 2px solid #ccc;
  --dialog-border-radius: 5px;
}

Many browsers do not have native support for the <dialog> element and will require a polyfill. Check the Can I Use database for current compatibility.

The dialog-polyfill polyfill is recommended and is supported by raven-dialog. Follow these steps to install it.

1. cd to your project's root directory.
2. Run: npm install dialog-polyfill --save
3. Update your angular.json file to include the style sheet and JavaScript file from the polyfill.

   "styles": [
     "node_modules/dialog-polyfill/dialog-polyfill.css"
   ],
   "scripts": [
     "node_modules/dialog-polyfill/dialog-polyfill.js"
   ],

To contribute to the development of this component, clone this repository and run npm install. Then run ng serve -o to start a development server and to open a sample page in your browser.

MIT license.