taylorjg/angular2dialog

Angular 2+ app demonstrating a form with validation inside an ng-bootstrap modal dialog

Description

This is a little Angular 2+ app that demonstrates a form with validation inside an ng-bootstrap modal dialog. It is an update of my earlier Angular 1.x AngularDialog repo.

A few things are different (other than the switch from Angular 1.x to Angular 2+):

• Use of Visual Studio Code instead of Visual Studio 2015.
• Use of Node.js/Express backend instead of IIS/ASP.NET MVC.

Try it out

The application is deployed on Heroku:

• https://angular2dialog.herokuapp.com/
  • NOTE: Heroku spins down the instance after a period of inactivity. It takes around 10s to reactivate

Future Plans

• Add pagination functionality.
• Add searching functionality.
• Add frontend unit tests.
• Add backend unit tests.
• Add e2e (Protractor) tests (with mocked RESTful API).
• Add real backend persistence (currently in-memory only). I will probably use Postgres for this.
  • In the end, I used Redis instead
• Make the API more RESTful by adding hypermedia links.
  • Change the frontend to make use of these hypermedia links.

Screenshots

Links

• angular
• ng-bootstrap
• Heroku Node.js Support

angular2dialog's Issues

First click of Cancel button doesn't dismis modal

Steps to reproduce:

• Click the Add Item button
• The modal is displayed with the focus in the "First name" input element
• Click the Cancel button (using the mouse)
• The modal is not dismissed. A validation error for the "First name" field is displayed.

Note that clicking the Cancel button again does dismiss the modal. Also, the first click of the Cancel button works as expected when editing an existing item.

Deprecation warning

After updating to Angular 4.0.3, the following warning message appears in the console:

The <template> element is deprecated. Use <ng-template> instead ("[WARNING ->]<template ngFor [ngForOf]="parts" let-part let-isOdd="odd"><span *ngIf="isOdd" class="{{highlightClas"): ng:///t/t.html@0:0

I think this is something to do with ng-bootstrap:

• ng-bootstrap/ng-bootstrap#1337

Keep an eye on the above issue and update ng-bootstrap when a fix is available.