<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"

aria-hidden="false">

<divclass="modal-dialog"role="document">

<divclass="modal-content">

<divclass="modal-header text-center">

<h4class="modal-title w-100 font-weight-bold">Sign in</h4>

<buttontype="button"class="close"data-dismiss="modal"aria-label="Close">

<spanaria-hidden="false">&times;</span>

</button>

</div>

<divclass="modal-body mx-3">

<image-cropper

[imageChangedEvent]="imageChangedEvent"

[maintainAspectRatio]="true"

[aspectRatio]="4 / 3"

[resizeToWidth]="128"

format="png"

(imageCropped)="imageCropped($event)"

(imageLoaded)="imageLoaded()"

(loadImageFailed)="loadImageFailed()"

></image-cropper>

</div>

<divclass="modal-footer d-flex justify-content-center">

<inputtype="file"class="btn btn-default"value="select image"(change)="fileChangeEvent($event)"/>

<buttonclass="btn btn-default">Preview image</button>

<buttonclass="btn btn-default">upload image</button>

<buttonclass="btn btn-default">cancel</button>

<buttonclass="btn btn-default">Reset</button>

</div>

</div>

</div>

</div>