Angular 4 Firebase – Delete File from Storage

In previous post, we have known how to upload file, then get list files from Firebase Storage. This tutorial shows you way to delete specific File in the List with a simple Angular 4 App.

Updated Post:
Angular 5 Firebase – Upload/Display/Delete Files from Storage

Related Posts:
How to integrate Firebase with Angular 4
Angular 4 Firebase – Upload File to Storage
Angular 4 Firebase – Get List Files from Storage

I. Technology

– Angular 4
– AngularFire2 4.0

II. How to do

1. Set up the Firebase Project & integrate Firebase with Angular 4 App

Please visit this post to know step by step.

2. Upload File Service

We delete a file:
– from Firebase Storage by its name using:
– info from Firebase Database by its key using:

3. Delete file function in Component

HTML template:

III. Practice

1. Project Overview
1.1 Goal

We will build an Angular 4 Firebase App that can:
– helps user choose file from local and upload it to Firebase Storage
– show progress with percentage
– save metadata to Firebase Realtime Database
– display list files from Firebase Storage
(previous post‘s functions above)
– delete specific file in list


1.2 Structure


2. Step by step
2.1 Set up the Firebase Project & integrate Firebase with Angular 4 App

Please visit this post to know step by step.


2.2 Add Firebase config to environments variable

Open /src/environments/environment.ts, add your Firebase configuration that we have saved when Popup window was shown:

2.3 Setup @NgModule

2.4 Model Class

2.5 Service

2.6 Form Upload Compoment


2.7 DetailsUpload Component



2.8 ListUpload Component



2.9 App Component



2.10 Check Result

Run the App, go to http://localhost:4200/.


Click delete any file:

Check Firebase Console, the file that we deleted disappears:
– Database:

– Storage:

IV. Source Code


By grokonez | September 21, 2017.

Last updated on November 29, 2018.

Related Posts

Got Something To Say:

Your email address will not be published. Required fields are marked *