save-calculator.component.html

<div mdbModal #saveDialog="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true,show:true}">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title w-100" id="myModalLabel">{{ uitextDialogTitle }}</h4>
            </div>
            <div class="modal-body">
                <!-- liste de calculettes avec check -->
                <div *ngFor="let c of calculators">
                    <input type="checkbox" value={{c.uid}} checked={{isSelected(c)}} (change)="onCheckCalc($event)">{{ c.title }}
                </div>

                <!-- bouton "tout sélectionnner" -->
                <button type="button" class="btn btn-mdb-color waves-light" (click)="selectAll()" mdbRippleRadius>{{ uitextSelectAll }}</button>

                <!-- bouton "tout désélectionnner" -->
                <button type="button" class="btn btn-mdb-color waves-light py-10" (click)="deselectAll()" mdbRippleRadius>{{ uitextDeselectAll }}</button>

                <!-- nom du fichier -->
                <div class="md-form form-sm mt-4">
                    <input mdbInputDirective [mdbValidate]="false" type="text" id="form1" class="form-control" [(ngModel)]="filename">
                    <!-- on utilise [innerHTML] pour que les codes HTML comme &nbsp; soient interprétés correctement -->
                    <label for="form1" [innerHTML]="filenameTitle"></label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger relative waves-light" (click)="saveDialog.hide();cancelSave()" mdbRippleRadius>{{ uitextCloseDialogNo }}</button>
                <button type="button" class="btn btn-success waves-light" aria-label="Close " (click)="saveDialog.hide();confirmSave()" mdbRippleRadius>{{ uitextCloseDialogYes }}</button>
            </div>
        </div>
    </div>
</div>