Input File: HTML Code for Angular 9

<form [formGroup]="form">
  <div class="form-group">
    <label for="file"></label>
    <input type="file" #fileInput formControlName="fileContact" id="file" required
      (change)="handleFileInput($event.target.files)">
    <button type="button" class="btn btn-info" (click)="clearSelection()">Clear</button>
  </div>
</form>

Now by using the template variable “fileInput“, we can access the HTML element to clear the files.

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

 @ViewChild('fileInput', {static: false})
  myFileInput: ElementRef;

Import ViewChild and ElementRef to support this functionality.

Using this template variable, clear the files.

this.myInputVariable.nativeElement.value = '';

Related Post

Looking for a complete example? read this post How to upload a file from Angular 9 with .NET Core Web API

Reference

Read more on Template syntax

Conclusion

In this post, I showed how to reset the selected file with the input tag file type in Angular 9. That’s all from this post. If you have any questions or just want to chat with me, feel free to leave a comment below.

The post How to reset the selected file with input tag file type in Angular 9 appeared first on Learn Smart Coding.

In this short post, I will show How To Fix Your Angular App To Make it work in IE11.

In Angular CLI version 8 and higher, applications are built using differential loading, a strategy where the CLI builds two separate bundles as part of your deployed application.

• The first bundle contains modern ES2015 syntax, takes advantage of built-in support in modern browsers, ships less polyfills, and results in a smaller bundle size.
• The second bundle contains code in the old ES5 syntax, along with all necessary polyfills. This results in a larger bundle size, but supports older browsers

Problem Statement

After Angular version 2, many things have changed. You app with version 2 or 4 might have worked in IE and when you upgraded your app to 6 or 8 then the IE stopped working. You might have come across many website stating this is because of Polyfills. That’s not the case always

Polyfills

Angular is built on the latest standards of the web platform. Targeting such a wide range of browsers is challenging because they do not support all features of modern browsers. You compensate by loading polyfill scripts (“polyfills”) for the browsers that you must support.

Angular.IO

Read about browser-support

So for specific use case, Polyfill might work. However, for supporting IE, you need two change to your configuration. Let’s see what are those to make this IE work both when debugging and after deploying to production.

Solution

Add a property  "es5BrowserSupport": true in angular.json file

Now, change your target as "es5" in tsconfig.json file

Also see other common issues encountered by developers.

Entity Framework Core dbcontextoptionsbuilder does not contain a definition for usesqlserver – Solved

Conclusion

Thanks for reading this piece. As you can see, to support IE 11, you need to add es5BrowserSupport property in angular.json file and change the target as es5 in tsconfig.json file that solved the problem. Let me know in the comments if you have questions.

The post How To Fix Your Angular App To Make it work in IE11 appeared first on Learn Smart Coding.