<|start_filename|>projects/ngx-sweetalert2-demo/src/app/nested/nested.component.html<|end_filename|>
<h2>Lazy-loaded submodule</h2>

<h3>This module has different presets, modals have no backdrop (configured using forChild())</h3>

<button [swal]="['Title', 'Text', 'success']">Show NestedModule's Swal</button>


<|start_filename|>projects/ngx-sweetalert2-demo/src/app/app.component.css<|end_filename|>
code {
    background: lightgrey;
}

.nested-active {
    display: none;
}


<|start_filename|>projects/ngx-sweetalert2-demo/src/app/app.component.html<|end_filename|>
<h1>Ngx-SweetAlert2</h1>

<h2>[swal]</h2>

<h3>Using the <code>[swal]="['title', 'text', 'icon']"</code> syntax</h3>

<button [swal]="['Hello world!', 'How\'s the world going?', 'question']">Show modal</button>

<hr>

<h3>Using the <code>[swal]="{{ '{ title: \'title\', ... }' }}"</code> syntax</h3>

<button [swal]="{ title: 'Hello world!', text: 'How\'s the world going?', icon: 'question' }">Show modal</button>

<hr>

<h3>Using the <code>[swal]="swalRef"</code> syntax with a <code>&lt;swal #swalRef&gt;&lt;/swal&gt;</code> component</h3>

<button [swal]="swal1">Show modal</button>
<swal #swal1 title="Hello world!" text="How's the world going?" icon="question"></swal>

<hr>

<h3><code>&lt;swal [swalFireOnInit]="true"&gt;&lt;/swal&gt;</code></h3>

<button (click)="modalFireCondition = true">Fire! by setting modalFireCondition = true</button>
<p>
    The modal's presence in the DOM is conditioned by the <code>modalFireCondition</code> variable.<br>
    As soon as this variable is set to <code>true</code>, the <code>*ngIf</code> on the <code>&lt;swal&gt;</code> element
    creates the component, and the modal fires immediately since it has <code>[swalFireOnInit]="true"</code>.<br>
    When the modal is closed, <code>modalFireCondition</code> is reset to <code>false</code>, the modal component is
    then destroyed by <code>*ngIf</code>, so you can click the button again.
</p>
<swal
    *ngIf="modalFireCondition"
    text="modalFireCondition = {{ modalFireCondition }}"
    [swalFireOnInit]="true"
    (didClose)="modalFireCondition = false">
</swal>

<hr>

<h3><code>&lt;swal [swalVisible]="isSwalVisible"&gt;&lt;/swal&gt;</code></h3>

<button (click)="isSwalVisible = true">Fire! by setting isSwalVisible = true</button>

<p>
    <code>[swalVisible]</code> provides a reactive way to change the modal visibility, if you do not want to use
    <code>SwalComponent.fire()</code> or <code>SwalComponent.dismiss()</code>.<br>
    This example uses a simple variable, but another common use case could be using an observable, binding it like this:
    <code>&lt;swal [swalVisible]="currentError$ | async" [title]="currentError$ | async"&gt;</code>. Don't forget to reset
    <code>currentError$</code> after though! (maybe <code>[swalFireOnInit]</code> with an <code>*ngIf</code> would be
    simpler here).
</p>

<swal
    text="isSwalVisible = {{ isSwalVisible }}"
    [swalVisible]="isSwalVisible"
    (didClose)="isSwalVisible = false">
</swal>

<hr>

<h3><code>*swalPortal</code> demos</h3>

<swal #swalWithPortals (didOpen)="startDynamicTextRotation()" (didClose)="stopDynamicTextRotation()">
    <ng-container *swalPortal="targets.closeButton">{{ currentTextChunk }}</ng-container>
    <ng-container *swalPortal="targets.title">{{ currentTextChunk }}</ng-container>
    <ng-container *swalPortal="targets.content">{{ currentTextChunk }}</ng-container>
    <ng-container *swalPortal="targets.confirmButton">{{ currentTextChunk }}</ng-container>
    <ng-container *swalPortal="targets.denyButton">{{ currentTextChunk }}</ng-container>
    <ng-container *swalPortal="targets.cancelButton">{{ currentTextChunk }}</ng-container>
    <ng-container *swalPortal="targets.footer">{{ currentTextChunk }}</ng-container>
</swal>

<button [swal]="swalWithPortals">Show swal with lots of portals</button>

<hr>

<a routerLink="nested" routerLinkActive="nested-active">Load submodule</a>
<router-outlet></router-outlet>
