Added storage download url pipe

[AckerApple]

Checklist

• Issue number for this PR: #nnn (new feature)
• Docs included?: yes (updated /docs/storage/storage.md)
• Test units included?: (yes in /src/storage/storage.spec.ts)
• In a clean directory, yarn install, yarn test run successfully? (i ran npm install npm test)

Description

Implementing a new feature: A convenient pipe exists for simple in page references.

I needed a simpler was to produce image src urls. The existing method to storage.ref().getDownloadUrl required too much setup for just that.

Code sample

@Component({
  selector: 'app-root',
  template: `<img [src]="'users/davideast.jpg' | ngfbStorageUrl | async" />`
})
export class AppComponent {}

The old way to getDownLoadUrl() of course still exists, as seen here:

@Component({
  selector: 'app-root',
  template: `<img [src]="profileUrl | async" />`
})
export class AppComponent {
  profileUrl: Observable<string | null>;
  constructor(private storage: AngularFireStorage) {
     const ref = this.storage.ref('users/davideast.jpg');
     this.profileUrl = ref.getDownloadURL();
  }
}

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here (e.g. I signed it!) and we'll verify it.

---

What to do if you already signed the CLA

Individual signers

• It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

• Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
• The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
• The email used to register you as an authorized contributor must also be attached to your GitHub account.

ℹ️ Googlers: Go here for more info.

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here (e.g. I signed it!) and we'll verify it.

---

What to do if you already signed the CLA

Individual signers

• It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

• Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
• The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
• The email used to register you as an authorized contributor must also be attached to your GitHub account.

ℹ️ Googlers: Go here for more info.

[AckerApple]

I signed it!

[googlebot]

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for all the commit author(s) or Co-authors. If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.
In order to pass this check, please resolve this problem and have the pull request author add another comment and the bot will run again. If the bot doesn't comment, it means it doesn't think anything has changed.

ℹ️ Googlers: Go here for more info.

[googlebot]

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for all the commit author(s) or Co-authors. If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.
In order to pass this check, please resolve this problem and have the pull request author add another comment and the bot will run again. If the bot doesn't comment, it means it doesn't think anything has changed.

ℹ️ Googlers: Go here for more info.

[AckerApple]

I signed it!

[AckerApple]

In regards to the CLA, I signed and I then used git config to add my email.

I'm uncertain how to proceed. Please assist

[jamesdaniels]

I like this, I'll review in a few. The CLA bot has trouble when the git email is different, I'll do the checks manually.

[jamesdaniels]

Perhaps we could call this downloadURL, getDownloadURL, storageDownloadURL or something to that effect, @davideast any thoughts?

Could we make it so this was an async pipe itself so it didn't have to be combined with async? So the developer could just do 'someref.jpeg' | storageDownloadURL... or maybe then we call it asyncDownloadURL?

[AckerApple]

My experience and recommendation is to avoid being too generic as to avoid name collisions as this type of functionality is common to convert a string to a url.

Also, if you removed the need for the async pipe, appending a dollar sign ngfbStorageUrl$ is a standard I’ve read to be clear that an in template variable is or is going through an observable process. It’s a practice to make clear something async is at play. I actually recommend against removing the need for the async pipe OR offer both (one pipe with a trailing $ sign and one without)

[jamesdaniels]

Both would be cool, but we could scope as a separate PR if you felt so inclined.

How about getFirebaseDownloadURL and firebaseDownloadURL$ for naming then? That way it's super clear.

[AckerApple]

I like that a lot. Great collaboration. I’d like to have this code in my project, how can I help move this along?

I can make the changes but perhaps @davideast would like throw an opinion in the hat?

Thank you very kindly

[AckerApple]

Ps, I don’t know how to have a pipe that has to be async not require the async pipe.

The end all be all maybe that the async pipe is actually a requirement

[AckerApple]

Sorry to “spam”

Here is dollar sign suffix docs:
https://angular.io/guide/rx-library#naming-conventions-for-observables

[samtstern]

@jamesdaniels I can confirm the CLA bot is wrong:
https://signcla.corp.google.com/search?q=acker.dawn.apple%40gmail.com&cla=google

[jamesdaniels]

Closing in favor of #2648.