Modal examples for nowzoo-angular-bootstrap-lite

animation-snippet.html

<!-- animation ON -->
<ng-template nzbModal #animatedInstance="nzbModal">
  <!-- note .fade class -->
  <div class="modal fade" tabindex="-1">....</div>
 </ng-template>

<!-- animation OFF -->
<ng-template nzbModal #inanimateInstance="nzbModal">
  <!-- note no .fade class -->
  <div class="modal" tabindex="-1">....</div>
 </ng-template>

backdrop-snippet.html

<!-- NO BACKDROP -->
<ng-template nzbModal #noBackdropInstance="nzbModal">
  <!-- note data-backdrop="false" -->
  <div class="modal fade" data-backdrop="false" tabindex="-1">...</div>
</ng-template>
<!-- STATIC BACKDROP -->
<ng-template nzbModal #staticBackdropInstance="nzbModal">
  <!-- note data-backdrop="static" -->
  <div class="modal fade" data-backdrop="static" tabindex="-1">...</div>
</ng-template>

modal-demo-animation.component.html

<!-- animation ON -->
<ng-template nzbModal #animatedInstance="nzbModal">
  <!-- note .fade class -->
  <div class="modal fade" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Animated Modal</h5>
          <button type="button" class="close"
            data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>
            I am animated.
          </p>
        </div>
        <div class="modal-footer">
          <button
            type="button" class="btn btn-secondary"
            data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<!-- animation OFF -->
<ng-template nzbModal #inanimateInstance="nzbModal">
  <!-- note absence of .fade class -->
  <div class="modal" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Inanimate Modal</h5>
          <button type="button" class="close"
            data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>
            I am not animated.
          </p>
        </div>
        <div class="modal-footer">
          <button
            type="button" class="btn btn-secondary"
            data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<div class="row align-items-center mb-3">
  <div class="col-md">
    <p>
      Animated <code>class="modal fade"</code>
    </p>

  </div>
  <div class="col-md">
    <p>
      <button class="btn btn-primary" (click)="animatedInstance.show()">
        Animated Modal
      </button>
    </p>
  </div>
</div>

<div class="row align-items-center">
  <div class="col-md">
    <p>
      Not Animated <code>class="modal"</code>
    </p>

  </div>
  <div class="col-md">
    <p>
      <button class="btn btn-primary" (click)="inanimateInstance.show()">
        Inanimate Modal
      </button>
    </p>
  </div>
</div>

modal-demo-animation.component.ts

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

@Component({
  selector: 'app-modal-demo-animation',
  templateUrl: './modal-demo-animation.component.html',
  styles: []
})
export class ModalDemoAnimationComponent {}

modal-demo-backdrop.component.html

<!-- NO BACKDROP -->
<ng-template nzbModal #noBackdropInstance="nzbModal">
  <!-- note data-backdrop="false" -->
  <div class="modal fade" data-backdrop="false" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal</h5>
          <button type="button" class="close"
            data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>
            I have no backdrop.
          </p>
        </div>
        <div class="modal-footer">
          <button
            type="button" class="btn btn-secondary"
            data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<!-- STATIC BACKDROP -->
<ng-template nzbModal #staticBackdropInstance="nzbModal">
  <!-- note data-backdrop="static" -->
  <div class="modal fade" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal</h5>
          <button type="button" class="close"
            data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>
            I have a static backdrop. Clicking on it does not dismiss me.
          </p>
        </div>
        <div class="modal-footer">
          <button
            type="button" class="btn btn-secondary"
            data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<p>
  <button class="btn btn-primary" (click)="noBackdropInstance.show()">
     Modal w/o Backdrop
  </button>
</p>
<p>
  <button class="btn btn-primary" (click)="staticBackdropInstance.show()">
    Modal w/ Static Backdrop
  </button>
</p>

modal-demo-events.component.html

<p>
  <button class="btn btn-primary" (click)="modalInstance.show()">
    Show Modal
  </button>
</p>
<p><strong>Last 5 Events</strong></p>
<ul>
  <li *ngFor="let e of last5">
    {{e.type}}.{{e.namespace}} at {{e.timeStamp | amDateFormat: 'H:mm:ss.SSSS'}}
  </li>
</ul>
<!-- the modal template -->
<ng-template nzbModal #modalInstance="nzbModal">
  <div class="modal fade" tabindex="-1">
    ...
  </div>
</ng-template>

modal-demo-events.component.ts

import { Component, ViewChild, AfterViewInit, OnDestroy} from '@angular/core';
import { NzbModalDirective } from 'nowzoo-angular-bootstrap-lite';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-modal-demo-events',
  templateUrl: './modal-demo-events.component.html'
})
export class ModalDemoEventsComponent implements AfterViewInit, OnDestroy {
  @ViewChild('modalInstance') modalInstance: NzbModalDirective;
  private sub: Subscription;
  last5: Event[] = [];

  ngAfterViewInit() {
    this.sub = this.modalInstance.events.subscribe((event:Event) => {
      this.last5.push(event);
      this.last5 = this.last5.slice(Math.max(this.last5.length - 5, 0));
    })
  }

  ngOnDestroy(){
    this.sub.unsubscribe();
  }
}

modal-demo-focus-snippet-1.html

<!-- NO FOCUS ON SHOW -->
<ng-template nzbModal #noFocusInstance="nzbModal">
  <!-- note data-focus="false" -->
  <div class="modal fade" data-focus="false" tabindex="-1">...</div>
</ng-template>

modal-demo-focus-snippet-2.html

<!-- DEFAULT: FOCUS ON SHOW -->
<ng-template nzbModal #focusInstance="nzbModal">
  <!-- omit data-focus attr -->
  <div class="modal fade" tabindex="-1">...</div>
</ng-template>

modal-demo-focus-styles.scss

.modal {
  .show-if-modal-focused{
    display: none;
  }
  .show-if-modal-not-focused{
    display: block;
  }
  &:focus {
    .show-if-modal-focused{
      display: block;
    }
    .show-if-modal-not-focused{
      display: none;
    }
  }
}

modal-demo-focus.component.html

<!-- NO FOCUS ON SHOW -->
<ng-template nzbModal #noFocusInstance="nzbModal">
  <!-- note data-focus="false" -->
  <div class="modal fade" data-focus="false" tabindex="-1" >
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal</h5>
          <button type="button" class="close"
            data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p class="show-if-modal-focused">
            The modal has focus.
          </p>
          <p class="show-if-modal-not-focused">
            The modal does not have focus.
          </p>
        </div>
        <div class="modal-footer">
          <button
            type="button" class="btn btn-secondary"
            data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<!-- DEFAULT: FOCUS ON SHOW -->
<ng-template nzbModal #focusInstance="nzbModal">
  <!-- omit data-focus attr -->
  <div class="modal fade" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal</h5>
          <button type="button" class="close"
            data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p class="show-if-modal-focused">
            The modal has focus.
          </p>
          <p class="show-if-modal-not-focused">
            The modal does not have focus.
          </p>
        </div>
        <div class="modal-footer">
          <button
            type="button" class="btn btn-secondary"
            data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<p>
  <button class="btn btn-primary" (click)="noFocusInstance.show()">
     Modal w/o Focus
  </button>
</p>
<p>
  <button class="btn btn-primary" (click)="focusInstance.show()">
    Modal w/ Focus (Default)
  </button>
</p>

modal-demo-goes-away-nicely.component.html

<!-- the modal template -->
<ng-template nzbModal #modalInstance="nzbModal">
  <div class="modal fade" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal Goes Away Nicely</h5>
          <button type="button" class="close"
            (click)="modalInstance.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>
            <a routerLink="/modals/go-away-nicely">Click here</a>
            to trigger a route change. This modal will disappear
            gracefully when its template is destroyed.
          </p>
        </div>
        <div class="modal-footer">
          <button
            type="button" class="btn btn-secondary"
            (click)="modalInstance.hide()">Close</button>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<p>
  <!-- the button -->
  <button class="btn btn-primary" (click)="modalInstance.show()">
    Show Modal
  </button>
</p>

modal-demo-handle-update.component.html

<p>
  <button class="btn btn-primary" (click)="modalInstance.show()">
    Show Modal
  </button>
</p>
<!-- the modal template -->
<ng-template nzbModal #modalInstance="nzbModal">
  <div class="modal fade" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">handleUpdate() Example</h5>
          <button type="button" class="close"
            (click)="modalInstance.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>
            <button class="btn btn-secondary btn-sm" (click)="decrease()">
              Decrease Content
            </button>
            <button class="btn btn-secondary btn-sm" (click)="increase()">
              Increase Content
            </button>
          </p>
          <hr>
          <p *ngFor="let p of paragraphs">{{p}}</p>
        </div>
        <div class="modal-footer">
          <button
            type="button" class="btn btn-secondary"
            (click)="modalInstance.hide()">Close</button>
        </div>
      </div>
    </div>
  </div>
</ng-template>

modal-demo-handle-update.component.ts

import { Component, ViewChild } from '@angular/core';
import { NzbModalDirective } from 'nowzoo-angular-bootstrap-lite';

const para: string = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ';

@Component({
  selector: 'app-modal-demo-handle-update',
  templateUrl: './modal-demo-handle-update.component.html'
})
export class ModalDemoHandleUpdateComponent {
  @ViewChild('modalInstance') modalInstance: NzbModalDirective;
  paragraphs: string[] = [para];
  increase() {
    this.paragraphs.push(para);
    this.modalInstance.handleUpdate();

  }
  decrease() {
    this.paragraphs.pop();
    this.modalInstance.handleUpdate();
  }
}

modal-demo-hide.component.html

<p>
  <button class="btn btn-primary" (click)="showModal()">
    Enter First Pet...
  </button>
</p>
<p>
  <strong>Saved Value: </strong> {{saved}}
</p>

<ng-template nzbModal #modalInstance="nzbModal">
  <div class="modal fade" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">First Pet</h5>
          <!-- note the use of modalInstance.hide() -->
          <button type="button" class="close"
            (click)="modalInstance.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <label for="modal-first-pet-name">
            Name of your first pet
          </label>
          <input [(ngModel)]="entered" class="form-control">
        </div>
        <div class="modal-footer">
          <!-- if the user clicks cancel, just modalInstance.hide() -->
          <button
            type="button" class="btn btn-secondary"
            (click)="modalInstance.hide()">Cancel</button>
          <!-- if the user clicks save, save() -->
          <button
            type="button" class="btn btn-success"
            (click)="save()">Save</button>
        </div>
      </div>
    </div>
  </div>
</ng-template>

modal-demo-hide.component.ts

import { Component, ViewChild } from '@angular/core';
import { NzbModalDirective } from 'nowzoo-angular-bootstrap-lite';
@Component({
  selector: 'app-modal-demo-hide',
  templateUrl: './modal-demo-hide.component.html',
})
export class ModalDemoHideComponent  {
  @ViewChild('modalInstance') modalInstance: NzbModalDirective;

  entered: string = '';
  saved: string = '';

  constructor() { }

  showModal() {
    this.entered = this.saved;
    this.modalInstance.show();
  }

  save() {
    this.saved = this.entered;
    this.modalInstance.hide();
  }

}

modal-demo-keyboard-snippet-1.html

<!-- DISABLE KEYBOARD -->
<ng-template nzbModal #noKeyboardInstance="nzbModal">
  <!-- note data-keyboard="false" -->
  <div class="modal fade" data-keyboard="false" tabindex="-1">...</div>
</ng-template>

modal-demo-keyboard-snippet-2.html

<!-- DEFAULT BEHAVIOR -->
<ng-template nzbModal #keyboardInstance="nzbModal">
  <!-- note absence of data-keyboard="false" -->
  <div class="modal fade" tabindex="-1">...</div>
</ng-template>

modal-demo-keyboard.component.html

<!-- DISABLE KEYBOARD -->
<ng-template nzbModal #noKeyboardInstance="nzbModal">
  <!-- note data-keyboard="false" -->
  <div class="modal fade" data-keyboard="false" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal</h5>
          <button type="button" class="close"
            data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>
            Hitting the <code>esc</code> key will not dismiss me.
          </p>
        </div>
        <div class="modal-footer">
          <button
            type="button" class="btn btn-secondary"
            data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<!-- DEFAULT BEHAVIOR -->
<ng-template nzbModal #keyboardInstance="nzbModal">
  <!-- note absence of data-keyboard="false" -->
  <div class="modal fade" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal</h5>
          <button type="button" class="close"
            data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>
            Hitting the <code>esc</code> key will dismiss me.
          </p>
        </div>
        <div class="modal-footer">
          <button
            type="button" class="btn btn-secondary"
            data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<p>
  <button class="btn btn-primary" (click)="noKeyboardInstance.show()">
     Modal - data-keyboard="false"
  </button>
</p>

<p>
  <button class="btn btn-primary" (click)="keyboardInstance.show()">
     Default Modal
  </button>
</p>

modal-demo-quickstart-snip-0.html

<ng-template nzbModal #modalInstance="nzbModal">
  <div class="modal fade" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        ...
      </div>
    </div>
  </div>
</ng-template>

modal-demo-quickstart-snip-1.html

<button (click)="modalInstance.show()" class="btn btn-primary">
  Show Modal
</button>

modal-demo-quickstart.component.html

<!-- the modal template -->
<ng-template nzbModal #modalInstance="nzbModal">
  <div class="modal fade" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Quick Start Modal</h5>
          <button type="button" class="close"
            (click)="modalInstance.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>
            This is a modal.
          </p>
        </div>
        <div class="modal-footer">
          <button
            type="button" class="btn btn-secondary"
            (click)="modalInstance.hide()">Close</button>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<p>
  <!-- the button -->
  <button class="btn btn-primary" (click)="modalInstance.show()">
    Show Modal
  </button>
</p>

modal-demo-quickstart.component.ts

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

@Component({
  selector: 'app-modal-demo-quickstart',
  templateUrl: './modal-demo-quickstart.component.html'
})
export class ModalDemoQuickstartComponent {}

modal-demo-show-on-instantiation-child.component.html

<p class="text-muted">
  This is the child component (containing the modal template.)
</p>
<!-- the modal template -->
<ng-template nzbModal #modalInstance="nzbModal">
  <div class="modal fade" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal Shown on Instantiation</h5>
          <button type="button" class="close"
            (click)="modalInstance.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>
            I was shown immediately by the <code>ngAfterViewInit</code>
            hook in the component that contains me.
          </p>
        </div>
        <div class="modal-footer">
          <button
            type="button" class="btn btn-secondary"
            (click)="modalInstance.hide()">Close</button>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<p>
  <!-- the button -->
  <button class="btn btn-primary" (click)="modalInstance.show()">
    Show Modal
  </button>
</p>

modal-demo-show-on-instantiation-child.component.ts

import { Component, AfterViewInit, ViewChild} from '@angular/core';
import { NzbModalDirective } from 'nowzoo-angular-bootstrap-lite';

@Component({
  selector: 'app-modal-demo-show-on-instantiation-child',
  templateUrl: './modal-demo-show-on-instantiation-child.component.html'
})
export class ModalDemoShowOnInstantiationChildComponent implements AfterViewInit {
  @ViewChild('modalInstance') modalInstance: NzbModalDirective;

  ngAfterViewInit() {
    this.modalInstance.show();
  }

}

modal-demo-show-on-instantiation-snippet.ts

export class ModalDemoShowOnInstantiationChildComponent implements AfterViewInit {
  @ViewChild('modalInstance') modalInstance: NzbModalDirective;
  ngAfterViewInit() {
    this.modalInstance.show();
  }
}

modal-demo-show-on-instantiation.component.html

<div *ngIf="!childInstantiated">
  <p class="text-muted">
    The child component (containing the modal template)
    does not exist!
  </p>
  <p>
    <button class="btn btn-secondary btn-sm"
      (click)="childInstantiated = true">Create Child</button>
  </p>
</div>
<div *ngIf="childInstantiated">
  <app-modal-demo-show-on-instantiation-child></app-modal-demo-show-on-instantiation-child>
  <p>
    <button class="btn btn-secondary btn-sm"
      (click)="childInstantiated = false">Remove Child</button>
  </p>
</div>

modal-demo-show-on-instantiation.component.ts

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

@Component({
  selector: 'app-modal-demo-show-on-instantiation',
  templateUrl: './modal-demo-show-on-instantiation.component.html',
})
export class ModalDemoShowOnInstantiationComponent {
  childInstantiated: boolean = false;
}

modal-demo-show.component.html

<p>
  <button (click)="modalInstance.show()" class="btn btn-primary">
    Show Modal (from template)
  </button>
</p>
<p>
  <button (click)="showTheModal()" class="btn btn-primary">
    Show Modal (from component)
  </button>
</p>

<ng-template nzbModal #modalInstance="nzbModal">
  <div class="modal fade" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Show Modal Demo</h5>
          <button type="button" class="close"
            (click)="modalInstance.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>
            This is a modal.
          </p>
        </div>
        <div class="modal-footer">
          <button
            type="button" class="btn btn-secondary"
            (click)="modalInstance.hide()">Close</button>
        </div>
      </div>
    </div>
  </div>
</ng-template>

modal-demo-show.component.ts

import { Component, ViewChild } from '@angular/core';
import { NzbModalDirective } from 'nowzoo-angular-bootstrap-lite';
@Component({
  selector: 'app-modal-demo-show',
  templateUrl: './modal-demo-show.component.html'
})
export class ModalDemoShowComponent {
  @ViewChild('modalInstance') modalInstance: NzbModalDirective;

  showTheModal(){
    this.modalInstance.show();
  }
}

modal-demo-size.component.html

<!-- DEFAULT -->
<ng-template nzbModal #defaultInstance="nzbModal">
  <div class="modal fade" tabindex="-1">
    <!-- note no .modal-sm or .modal-lg -->
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Default Modal</h5>
          <button type="button" class="close"
            data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>
            I am the default size.
          </p>
        </div>
        <div class="modal-footer">
          <button
            type="button" class="btn btn-secondary"
            data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<!-- SMALL -->
<ng-template nzbModal #smInstance="nzbModal">
  <div class="modal fade" tabindex="-1">
    <!-- note .modal-dialog.modal-sm -->
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Small Modal</h5>
          <button type="button" class="close"
            data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>
            I am a smaller modal.
          </p>
        </div>
        <div class="modal-footer">
          <button
            type="button" class="btn btn-secondary"
            data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<!-- LARGE -->
<ng-template nzbModal #lgInstance="nzbModal">
  <div class="modal fade" tabindex="-1">
    <!-- note .modal-dialog.modal-lg -->
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Large Modal</h5>
          <button type="button" class="close"
            data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>
            I am a larger modal.
          </p>
        </div>
        <div class="modal-footer">
          <button
            type="button" class="btn btn-secondary"
            data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</ng-template>


<div class="row align-items-center mb-3">
  <div class="col-md">
    <p>
      <code>class="modal-dialog"</code>
    </p>

  </div>
  <div class="col-md">
    <p>
      <button class="btn btn-primary" (click)="defaultInstance.show()">
        Default Size
      </button>
    </p>
  </div>
</div>

<div class="row align-items-center mb-3">
  <div class="col-md">
    <p>
      <code>class="modal-dialog modal-sm"</code>
    </p>

  </div>
  <div class="col-md">
    <p>
      <button class="btn btn-primary" (click)="smInstance.show()">
        Small Modal
      </button>
    </p>
  </div>
</div>

<div class="row align-items-center">
  <div class="col-md">
    <p>
       <code>class="modal-dialog modal-lg"</code>
    </p>
  </div>
  <div class="col-md">
    <p>
      <button class="btn btn-primary" (click)="lgInstance.show()">
        Large Modal
      </button>
    </p>
  </div>
</div>

modal-demo-status.component.html

<p>
  <button class="btn btn-primary" (click)="modalInstance.show()">
    Show Modal
  </button>
</p>
<p>
  <strong>Status:</strong>
  {{modalInstance.status | async}}
</p>
<!-- the modal template -->
<ng-template nzbModal #modalInstance="nzbModal">
  <div class="modal fade" tabindex="-1">
   ...
  </div>
</ng-template>

modal-demo-status.component.ts

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

@Component({
  selector: 'app-modal-demo-status',
  templateUrl: './modal-demo-status.component.html'
})
export class ModalDemoStatusComponent {}

overview-1.html

<ng-template nzbModal #modalInstance="nzbModal">
  <div class="modal fade" tabindex="-1">
    <!-- omitted for clarity -->
  </div>
</ng-template>

overview-2.html

<button (click)="modalInstance.show()">
  Show Modal
</button>

overview-3.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { NzbModalDirective } from 'nowzoo-angular-bootstrap-lite';
@Component({
  selector: 'app-some',
  templateUrl: './some.component.html'
})
export class SomeComponent implements AfterViewInit {
  @ViewChild('modalInstance') modalInstance: NzbModalDirective;
  ngAfterViewInit() {
    console.log(this.modalInstance);
  }
}

overview-4.html

<!-- animation off,  backdrop static, size small -->
<ng-template nzbModal #inanimateInstance="nzbModal">
  <!-- note no .fade class -->
  <div class="modal" tabindex="-1" data-backdrop="static">
     <!-- note .modal-sm class -->
    <div class="modal-dialog modal-sm" role="document">
       <!-- omitted for clarity -->
    </div>
  </div>
 </ng-template>

quickstart-1.html

<!-- template tag -->
<ng-template nzbModal #modalInstance="nzbModal">
  <!--start Bootstrap modal markup -->
  <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="quickstartModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="quickstartModalLabel">Quickstart Modal</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Hello World
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div> 
  <!-- end Bootstrap modal markup -->
</ng-template>

quickstart.html

!-- template tag -->
<ng-template nzbModal #modalInstance="nzbModal">
  <!-- Bootstrap modal markup -->
  <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="quickstartModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="quickstartModalLabel">Quickstart Modal</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Hello World
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div> 
  <!-- end Bootstrap modal markup -->
</ng-template>

<!-- the button -->
<p class="text-center">
  <button class="btn btn-primary" (click)="modalInstance.show()">
    Show Modal
  </button>
</p>

size-snippet.html

<!-- SMALL -->
<ng-template nzbModal #smInstance="nzbModal">
  <div class="modal fade" tabindex="-1">
    <!-- note .modal-dialog.modal-sm -->
    <div class="modal-dialog modal-sm" role="document">...</div>
  </div>
</ng-template>
<!-- LARGE -->
<ng-template nzbModal #lgInstance="nzbModal">
  <div class="modal fade" tabindex="-1">
    <!-- note .modal-dialog.modal-lg -->
    <div class="modal-dialog modal-lg" role="document">...</div>
  </div>
</ng-template>