added storage url pipe

Author: Admin Apple

docs/storage/storage.md

@@ -186,6 +186,16 @@ export class AppComponent {
 
 ### Downloading Files
 
+A convenient pipe exists for simple in page references
+
+```ts
+@Component({
+  selector: 'app-root',
+  template: `<img [src]="'users/davideast.jpg' | ngfbStorageUrl | async" />`
+})
+export class AppComponent {}
+```
+
 To download a file you'll need to create a reference and call the `getDownloadURL()` method on an `AngularFireStorageReference`.
 
 ```ts

src/storage/pipes/storageUrl.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe } from '@angular/core'
+import { AngularFireStorage } from '../storage';
+
+/** to be used with in combination with | async */
+@Pipe({
+  name: 'ngfbStorageUrl'
+}) export class AngularFirestoreStorageUrl {
+  constructor(public storage:AngularFireStorage){}
+
+  transform(path) {
+    return this.storage.ref(path).getDownloadURL()
+  }
+}

src/storage/storage.module.ts

@@ -1,8 +1,11 @@
 import { NgModule, InjectionToken } from '@angular/core';
 import { AngularFireStorage, StorageBucket } from './storage';
 import 'firebase/storage';
+import { AngularFirestoreStorageUrl } from './pipes/storageUrl.pipe'
+
 
 @NgModule({
+  declarations: [ AngularFirestoreStorageUrl ],
   providers: [ AngularFireStorage ]
 })
 export class AngularFireStorageModule { }

src/storage/storage.spec.ts

@@ -4,6 +4,7 @@ import { TestBed, inject } from '@angular/core/testing';
 import { FirebaseApp, FirebaseOptionsToken, AngularFireModule, FirebaseNameOrConfigToken } from '@angular/fire';
 import { AngularFireStorageModule, AngularFireStorage, AngularFireUploadTask, StorageBucket } from '@angular/fire/storage';
 import { COMMON_CONFIG } from './test-config';
+import { AngularFirestoreStorageUrl } from './pipes/storageUrl.pipe'
 
 describe('AngularFireStorage', () => {
   let app: FirebaseApp;
@@ -199,4 +200,16 @@ describe('AngularFireStorage w/options', () => {
 
   });
 
+  describe('pipes', () => {
+    it('ngfbStorageUrl should download a url', (done) => {
+      const ngfbStorageUrl = new AngularFirestoreStorageUrl( afStorage )
+      const url$ = ngfbStorageUrl.transform('af.json')
+      url$.subscribe(
+        url => { expect(url).toBeDefined(); },
+        e => { done.fail(); },
+        done
+      );
+    });
+  });
+
 });