ViewChild setter doesn't detect ref pattern inside ng-bootstrap modal
Like facebook, when you want to change your profile picture, you click the change button, a modal mod will appear, then you can upload a new image or edit an old image. I am using ng-bootstrap modal and ng2-img-cropper, when you click edit profile button the modal will open using ref template. Inside this ref template, there is another ref template "#cropper" that points to the image cropping component.
The image cropper module has a built-in "setImage" function to set the cropper image. Before opening the modality, I know that the ref trimmer will be undefined because the modal hasn't been printed in the body yet. Now when I'm looking for this case, I've found a way to get this clipping element after the modal is opened with the view's child setter, this way the view's child will retry to set the clipping when this template is available in the view.
this is my typescript code:
@ViewChild('cropper') set cropper(cropper:ImageCropperComponent) {
//cropper.setImage(this.ImageHtmlElement);
console.log(cropper);// prints : undefined
}
And this is my HTML template:
<template #profilpicmodal let-c="close" let-d="dismiss" ngbModalContainer>
<div class="profile-cover-modal">
<div class="modal-header">
<div class="close-form ml-auto">
<button type="button" class="close ml-auto" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<span class="info your-photo-tab">
<p>DID YOU KNOW?</p>
<p>You can also add images from your phone</p>
</span>
</div>
<div class="modal-tabs">
<ul class="list-unstyled">
<li class="upload" (click)="PhotoModalTab = 'upload'"><a class="btn btn-transparent" [ngClass]="{'active':PhotoModalTab == 'upload'}">Upload</a></li>
<li class="your-photos" (click)="PhotoModalTab = 'filemanager'"><a class="btn btn-transparent" [ngClass]="{'active':PhotoModalTab == 'filemanager'}">Your Photos</a></li>
</ul>
</div>
<div class="modal-body">
<div [hidden]="PhotoModalTab != 'upload'" ng2FileDrop class="upload-tab" (ng2FileDropFileAccepted)="dragFileAccepted($event,cropper)">
<!--<img *ngIf="!ProfilePicData.original" src="./assets/images/Drag_Drop.png" alt="">-->
<img-cropper #cropper [image]="ProfilePicData" [settings]="ProfilecropperSettings"></img-cropper><br>
<div *ngIf="!ProfilePicData.original">
<p class="drag-photo">Drag a Photo Here</p>
<p class="drag-or">or</p>
</div>
<a class="btn btn-load-more" (click)="fileinput.click()">
Upload
<input #fileinput type="file" (change)="fileChangeListener($event.target.files[0],cropper)" id="upload" style="display:none;" />
</a>
<p class="drag-or mt-4 mb-0">For best results image should be at minimum 300px in height or width.</p>
</div>
<app-file-browser *ngIf="PhotoModalTab == 'filemanager'" (emitter)="SelectFileAndSave(closebtn,$event)"></app-file-browser>
</div>
<div class="modal-footer">
<div class="buttons-section">
<button #closebtn type="button" class="btn btn-load-more" (click)="c('Close click')">Close</button>
<button type="button" class="btn btn-load-more" *ngIf="PhotoModalTab == 'upload'" (click)="SaveImage(closebtn,ProfilePicData,'profile')">Save</button>
</div>
</div>
</div>
</template>
At this point, I got a very strange case that every time I try to register a clipping inside a child setter of a view, I always get undefined and the application crashes because the clipper doesn't have a function called setImage. The app actually detects the element as it runs the setter again and prints console.log in the browser console when I open the modal, but I don't know why the trimmer is undefined
I also tried ViewChidren, unfortunately no luck.
Sorry for bad english
source to share
No one has answered this question yet
Check out similar questions: