ng2-encrm-components/src/app/element-list/elements/modals-preview/modals-preview.component.html

angular 2 components

<div class="col-xs-12">
    <h1 id="modals">Modals</h1>
    <p class="lead">
        from <a href="https://valor-software.com/ng2-bootstrap/#/modals">ng2-bootstrap</a>
    </p>
    <button type="button" class="btn btn-primary" (click)="showModal()">Open modal
    </button>
    <button type="button" class="btn btn-primary" (click)="showSmallModal()">Open small modal
    </button>
    <br>
    <br>
    <tabset>
        <tab heading="HTML">
            <pre><code highlight class="html">
&lt;!-- buttons --&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; (click)=&quot;showModal()&quot;&gt;Open modal
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; (click)=&quot;showSmallModal()&quot;&gt;Open small modal
&lt;/button&gt;

&lt;!-- modals --&gt;
&lt;div bsModal #myModal=&quot;bs-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
    &lt;div class=&quot;modal-content&quot;&gt;
        &lt;div class=&quot;modal-header&quot;&gt;
            &lt;i aria-hidden=&quot;true&quot;
            class=&quot;close material-icons&quot;
            (click)=&quot;hideModal()&quot;
            aria-label=&quot;Close&quot;&gt;cancel&lt;/i&gt;
            &lt;h4 class=&quot;modal-title&quot; id=&quot;myModalLabel&quot;&gt;Modal title&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class=&quot;modal-body&quot;&gt;
            ...
        &lt;/div&gt;
        &lt;div class=&quot;modal-footer&quot;&gt;
            &lt;span class=&quot;en-btn btn-link&quot; (click)=&quot;hideModal()&quot;&gt;Close&lt;/span&gt;
            &lt;span class=&quot;en-btn en-btn-primary&quot;
            (click)=&quot;hideModal()&quot;&gt;Save changes&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div bsModal #childModal=&quot;bs-modal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
aria-labelledby=&quot;mySmallModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog modal-sm&quot;&gt;
    &lt;div class=&quot;modal-content&quot;&gt;
        &lt;div class=&quot;modal-body&quot;&gt;
            &lt;span aria-hidden=&quot;true&quot;
            class=&quot;close fg-dark material-icons&quot;
            (click)=&quot;hideSmallModal()&quot;
            aria-label=&quot;Close&quot;&gt;cancel&lt;/span&gt;
            I am a child modal, opened from parent component!
            &lt;br&gt;
        &lt;/div&gt;
        &lt;div class=&quot;modal-footer&quot;&gt;
            &lt;span class=&quot;en-btn btn-link&quot; data-dismiss=&quot;modal&quot;
            (click)=&quot;hideSmallModal()&quot;&gt;Close&lt;/span&gt;
            &lt;span class=&quot;en-btn en-btn-primary&quot;
            (click)=&quot;hideSmallModal()&quot;&gt;Save changes&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
        </code></pre>
        </tab>
    </tabset>
    <div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <i aria-hidden="true"
                       class="close material-icons"
                       (click)="hideModal()"
                       aria-label="Close">cancel</i>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <span class="en-btn btn-link" (click)="hideModal()">Close</span>
                    <span class="en-btn en-btn-primary"
                          (click)="hideModal()">Save changes</span>
                </div>
            </div>
        </div>
    </div>
    <div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
         aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-body">
                        <span aria-hidden="true"
                              class="close fg-dark material-icons"
                              (click)="hideSmallModal()"
                              aria-label="Close">cancel</span>
                    I am a child modal, opened from parent component!
                    <br>
                </div>
                <div class="modal-footer">
                        <span class="en-btn btn-link" data-dismiss="modal"
                              (click)="hideSmallModal()">Close</span>
                    <span class="en-btn en-btn-primary"
                          (click)="hideSmallModal()">Save changes</span>
                </div>
            </div>
        </div>
    </div>
</div>