How can I display an image using Typescript and Angular 4

Question

I am very new to typescript and web development in general so I am sorry if my code is terrible. Anyways, I am having an issue displaying a \"preview image\" for a profile p

Answer 1

You achive this by this simple function :

Template :

Component :

onSelectFile(event) { // called each time file input changes
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]); // read file as data url

      reader.onload = (event) => { // called once readAsDataURL is completed
        this.url = event.target.result;
      }
    }
}

Here is the working example of it, please check this out:

WORKING DEMO