0

using ng-bootstrap/ng-bootstrap. create modal and added let-c="close" and need to call it in .ts file as following c('Cross click') but return Cannot find name 'c'

 `<ng-template #upload let-modal let-c="close" let-d="dismiss">
        <div id="upload-new-image" class="mfp-with-anim col-4 form-popup">
            <form class="form-inline">
                <div class="input-group">
                    <label class="input-upload gray">
                        <input type="file" (change)="OnFileSelect($event)">
                        <span>{{_fileName}}</span>
                    </label>
                    <span class="error">{{_imgErrMsg}}</span>
                </div>
                <div class="input-group">
                    <label class="input-text">
                        <span class="label">Image Alt Text</span>
                        <input type="text" #alttexvalue>
                    </label>
                    <span class="error">{{_AltErrMsg}}</span>
                </div>
                <div class="align-content-right m-t-30">
                    <a href="#upload-success-message" class="btn btn-default open-form-popup" (click)="uploadOnsbmit(alttexvalue.value)"
                        data-effect="mfp-zoom-in">Upload</a>
                </div>
                <button type="button" class="close" aria-label="Close" (click)="c('Cross click')"></button>

            </form>


        </div>


    </ng-template>`
Huda Twfik
  • 157
  • 1
  • 10

1 Answers1

0
<ng-template #upload let-modal>
        <div id="upload-new-image" class="mfp-with-anim col-4 form-popup">
            <form class="form-inline">
                <div class="input-group">
                    <label class="input-upload gray">
                        <input type="file" (change)="OnFileSelect($event)">
                        <span>{{_fileName}}</span>
                    </label>
                    <span class="error">{{_imgErrMsg}}</span>
                </div>
                <div class="input-group">
                    <label class="input-text">
                        <span class="label">Image Alt Text</span>
                        <input type="text" #alttexvalue>
                    </label>
                    <span class="error">{{_AltErrMsg}}</span>
                </div>
                <div class="align-content-right m-t-30">
                    <a href="#upload-success-message" class="btn btn-default open-form-popup" (click)="uploadOnsbmit(alttexvalue.value)"
                        data-effect="mfp-zoom-in">Upload</a>
                </div>
                <button type="button" class="close" aria-label="Close" (click)="modal.close('Cross click')"></button>

            </form>

        </div>

</ng-template>

Should work if you want to close the modal from within the template.

If you want to do it from typescript you can either do : - Call dismissAll() on the service - Call close() on NgbModalRef which is a reference to a newly opened modal returned by the 'NgbModal.open()' method

Good luck!

Jelle
  • 2,026
  • 1
  • 12
  • 17