In web applications, it is common to upload files by the user, like profile photos, cover photos ....
In this tutorial we will discover how to upload a file with a loader using Angular framwork and template driven form.
To begin you must create a blank angular project using this command. You obtain a ready angular project for this tutoriel. Next, open your project in your favorite code editor.
In app.module.ts file, we need to import the form module and httpClient module of angular to enable using forms and possibility to make request on API.
Next, create an service and name this upload using the following command provide by angular CLI.
In upload.service.ts file, we will add some functions that allowed to make request API. In the end your upload.service.ts file should be like this.
Now, create an component with name "upload-file", for that use the following command.
Install bootstrap css with npm install bootstrapp and import it in style.scss in your src directory.
We can now work in our component, in "upload-file.component.html" file paste this code.
In upload-file.component.ts we paste the following code to end this feature correctly.
Your app.component.html should be like this.
Top comments (0)