Brandkit/Components/aside

aside-template.html

<ng-template #asideContent let-c="close" let-d="dismiss">
  <modal>
    <modal-header title="Simple Aside" [dismiss]="d"></modal-header>
    <modal-body>
      <h4>This is an example of an aside</h4>
      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas leo auctor,
        nulla est conubia elementum netus tincidunt.
      </p>
    </modal-body>
    <!-- Optional -->
    <modal-footer>
      <button type="button" class="btn btn-link" (click)="d('Cancel click')">Cancel</button>
      <button type="button" class="btn btn-primary" (click)="c('Okay click')">Okay</button>
    </modal-footer>
  </modal>
</ng-template>

aside.ts

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ModalService } from '@armor/brandkit';

@Component({
  templateUrl: './modals.html'
})

export class ModalsComponent {

  constructor(private ngbModal: NgbModal, private modalService: ModalService) {}

  public closeResult: string;

  public open(content) {
    // For a wide aside 
    // this.modalService.openAside(content, {size: 'lg'})
    this.modalService.openAside(content).result
      .then(() => { this.confirm(); })
      .catch(() => { this.cancel(); });
  }

  public confirm() {
    this.closeResult = `Closed/Accepted (Promise Resolved)`;
  }

  public cancel() {
    this.closeResult = `Dismissed  (Promise Rejected)`;
  }
}