Begin to migrato to angular/material.

src/accounts/account.module.ts

@@ -3,6 +3,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MdButtonModule, MdDialogModule, MdTableModule } from '@angular/material';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 
@@ -28,6 +29,9 @@ import { AccountListState } from './account.states'
     RouterModule.forChild([
       AccountListState
     ]),
+    MdButtonModule,
+    MdDialogModule,
+    MdTableModule,
     NgLoggerModule,
     ToastrModule,
     NgbModule

src/accounts/accountEditModal.component.ts

@@ -1,7 +1,6 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:
-import { Component, Input, ViewChild } from '@angular/core';
-
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { Component, Inject, Input, ViewChild } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
 
 import { Account } from './account';
 import { AccountFormComponent } from './accountForm.component';
@@ -9,33 +8,36 @@ import { AccountFormComponent } from './accountForm.component';
 @Component({
   selector: 'account-edit-modal',
   template: `
-<div class="modal-header">
-  <h3 class="modal-title" id="modal-title">{{ title() }}</h3>
-</div>
+<h2 md-dialog-tiitle>{{ title() }}</h2>
 
-<div class="modal-body" id="modal-body">
-  <account-form [account]="account" (submit)="submit()" #accountForm="accountForm"></account-form>
-</div>
+<md-dialog-content>
+    <account-form [account]="account" (submit)="submit()" #accountForm="accountForm"></account-form>
+</md-dialog-content>
 
-<div class="modal-footer">
-  <button class="btn btn-primary" [disabled]="!accountForm.form.valid" (click)="submit()">
+<md-dialog-actions>
+  <button md-raised-button color="primary" [disabled]="!accountForm?.form.valid" (click)="submit()">
     Save
   </button>
 
-  <button class="btn btn-default" (click)="cancel()">
+  <button md-raised-button color="warn" md-dialog-close>
     Cancel
   </button>
-</div>
+</md-dialog-actions>
   `
 })
 export class AccountEditModalComponent {
-  @Input() account: Account;
+  private account: Account;
   @ViewChild('accountForm') accountForm: AccountFormComponent;
 
-  constructor(private activeModal: NgbActiveModal) {}
+  constructor(
+    @Inject(MD_DIALOG_DATA) public data: any,
+    public dialogRef: MdDialogRef<AccountEditModalComponent>,
+  ) {
+    this.account = data.account;
+  }
 
   title(): string {
-    if(this.account.id) {
+    if(this.account && this.account.id) {
       return "Account #" + this.account.id;
     } else {
       return "New account";
@@ -50,10 +52,6 @@ export class AccountEditModalComponent {
     account.name = formModel.name;
     account.authorized_overdraft = formModel.authorizedOverdraft;
 
-    this.activeModal.close(account);
-  }
-
-  cancel(): void {
-    this.activeModal.dismiss("closed");
+    this.dialogRef.close(account);
   }
 }

src/accounts/accountList.component.ts

@@ -1,9 +1,9 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialog } from '@angular/material';
 import { Observable } from 'rxjs/Rx';
 
 import { Logger } from '@nsalaun/ng-logger';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 
 import { Account } from './account';
@@ -15,31 +15,33 @@ import { AccountEditModalComponent } from './accountEditModal.component';
   selector: 'account-list',
   template: `
 <div class="row">
-  <table class="table table-sm table-striped table-condensed table-hover">
-    <thead>
-      <tr>
-        <th>Nom du compte</th>
-        <th>Solde courant</th>
-        <th>Solde pointé</th>
-        <th>Découvert autorisé</th>
-        <th>Actions</th>
-      </tr>
-    </thead>
+  <div class="col s12">
+    <table class="bordered highlight responsive-table">
+      <thead>
+        <tr>
+          <th>Nom du compte</th>
+          <th>Solde courant</th>
+          <th>Solde pointé</th>
+          <th>Découvert autorisé</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
 
-    <tbody>
-      <tr>
-        <td colspan="5">
-          <button class="btn btn-success" (click)="add()">
-            Ajouter
-          </button>
-        </td>
-      </tr>
+      <tbody>
+        <tr>
+          <td colspan="5">
+            <button md-raised-button color="primary" (click)="add()">
+              Ajouter
+            </button>
+          </td>
+        </tr>
 
-      <tr *ngFor="let account of accounts"
-        [account-row]="account" (needsReload)="load()">
-      </tr>
-    </tbody>
-  </table>
+        <tr *ngFor="let account of accounts"
+          [account-row]="account" (needsReload)="load()">
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </div>
     `,
 })
@@ -50,7 +52,7 @@ export class AccountListComponent implements OnInit {
     private accountService: AccountService,
     private toastrService: ToastrService,
     private logger: Logger,
-    private ngbModal: NgbModal
+    private mdDialog: MdDialog,
   ) {
   }
 
@@ -70,15 +72,19 @@ export class AccountListComponent implements OnInit {
    * Add an empty account.
    */
   add() {
-    const modal = this.ngbModal.open(AccountEditModalComponent, {
-      size: 'lg'
+    let dialogRef = this.mdDialog.open(AccountEditModalComponent, {
+      data: {
+        account: new Account(),
+      }
     });
 
-    modal.componentInstance.account = new Account();
-
-    modal.result.then((account: Account) => {
-      this.logger.log("Modal closed => save account", account);
-      this.save(account);
+    dialogRef.afterClosed().subscribe((account: Account) => {
+      if(account) {
+        this.logger.log("Modal closed => save account", account);
+        this.save(account);
+      } else {
+        this.logger.log("Modal dismissed");
+      }
     }, (reason) => function(reason) {
     });
   };