python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Angular 4 file download

Angular 4 file upload and download using TypeScript!

Example 1 - We will need to create shared module and this shared module is import in AppModule file i.e.

Shared.module.ts -
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { FileSelectDirective, FileDropDirective } from 'ng2-file-upload';
import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';

     imports: [ FileUploadModule], 
     declarations: [ ],
     exports :[ FileSelectDirective, FileDropDirective, FormsModule,
export class SharedModule { }

Import share.Module in the AppModule i.e.
import { NgModule } from '@angular/core';
import { SharedModule} from '../shared/shared.module';

    imports: [SharedModule],
    declarations: [],
    exports :[],
export class AppModule { }

Example 2 - We can also use ng2-file-upload in the angular 4 apps -

Import these directives to your module -
import { FileDropDirective, FileSelectDirective } from 'ng2-file-upload';
  declarations: [FileDropDirective, FileSelectDirective]
export class AppModule { }

Then create file uploader in your component -
import { Component, OnInit } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';

    selector: 'app-files',
    templateUrl: 'files.component.html',
    styleUrls: ['files.component.css'],
export class FilesComponent implements OnInit {
    uploader = new FileUploader({url: `YOUR URL`});

And use it in your html file –
<div ng2FileDrop  [uploader]="uploader">
<input type="file" ng2FileSelect [uploader]="uploader" multiple />

It might help you to upload and download files in Angular 4 -
I hope you are enjoying with this post! Please share with you friends. Thank you!

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions