{"id":15508482,"url":"https://github.com/anthonynahas/ngx-storage-firebaseui","last_synced_at":"2025-04-23T02:23:13.355Z","repository":{"id":38581343,"uuid":"251024988","full_name":"AnthonyNahas/ngx-storage-firebaseui","owner":"AnthonyNahas","description":"Angular Material UI components for firebase storage","archived":false,"fork":false,"pushed_at":"2023-01-09T12:21:17.000Z","size":40823,"stargazers_count":9,"open_issues_count":12,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-22T23:24:46.146Z","etag":null,"topics":["angular","directory","download","files","firebase","gallery","images","library","material","ngx","storage","upload"],"latest_commit_sha":null,"homepage":"https://ngx-storage-firebaseui.firebaseapp.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AnthonyNahas.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-29T12:19:18.000Z","updated_at":"2021-12-13T09:52:51.000Z","dependencies_parsed_at":"2023-02-08T11:16:40.666Z","dependency_job_id":null,"html_url":"https://github.com/AnthonyNahas/ngx-storage-firebaseui","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnthonyNahas%2Fngx-storage-firebaseui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnthonyNahas%2Fngx-storage-firebaseui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnthonyNahas%2Fngx-storage-firebaseui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnthonyNahas%2Fngx-storage-firebaseui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnthonyNahas","download_url":"https://codeload.github.com/AnthonyNahas/ngx-storage-firebaseui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241933180,"owners_count":20044658,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","directory","download","files","firebase","gallery","images","library","material","ngx","storage","upload"],"created_at":"2024-10-02T09:38:47.441Z","updated_at":"2025-03-04T22:30:44.298Z","avatar_url":"https://github.com/AnthonyNahas.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg height=\"256px\" width=\"256px\" style=\"text-align: center;\"\n  src=\"https://cdn.jsdelivr.net/gh/anthonynahas/ngx-storage-firebaseui@master/assets/angular-material-extensions-logo.svg\"\u003e\n\u003c/p\u003e\n\n# ngx-storage-firebaseui - Open Source Library for Angular Web Apps to integrate a material user interface for firebase storage.\n\n[![npm version](https://badge.fury.io/js/ngx-storage-firebaseui.svg)](https://badge.fury.io/js/ngx-storage-firebaseui)\n[![demo](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://ngx-storage-firebaseui.firebaseapp.com)\n[![docs: typedoc](https://img.shields.io/badge/docs-typedoc-4D0080.svg)](https://ngx-storage-firebaseui.firebaseapp.com/doc/index.html)\n[![codecov](https://codecov.io/gh/anthonynahas/ngx-storage-firebaseui/branch/master/graph/badge.svg)](https://codecov.io/gh/anthonynahas/ngx-storage-firebaseui)\n[![CircleCI branch](https://img.shields.io/circleci/project/github/AnthonyNahas/ngx-storage-firebaseui/master.svg?label=circleci)](https://circleci.com/gh/AnthonyNahas/ngx-storage-firebaseui)\n[![Build Status](https://travis-ci.org/AnthonyNahas/ngx-storage-firebaseui.svg?branch=master)](https://travis-ci.org/AnthonyNahas/ngx-storage-firebaseui)\n[![Join the chat at https://gitter.im/ngx-storage-firebaseui/Lobby](https://badges.gitter.im/ngx-storage-firebaseui/Lobby.svg)](https://gitter.im/ngx-storage-firebaseui/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![dependency Status](https://david-dm.org/anthonynahas/ngx-storage-firebaseui/status.svg)](https://david-dm.org/anthonynahas/ngx-storage-firebaseui)\n[![devDependency Status](https://david-dm.org/anthonynahas/ngx-storage-firebaseui/dev-status.svg?branch=master)](https://david-dm.org/anthonynahas/ngx-storage-firebaseui#info=devDependencies)\n[![npm](https://img.shields.io/npm/dt/ngx-storage-firebaseui.svg?style=flat-square)](https://www.npmjs.com/package/ngx-storage-firebaseui)\n[![Greenkeeper badge](https://badges.greenkeeper.io/AnthonyNahas/ngx-storage-firebaseui.svg)](https://greenkeeper.io/)\n[![license](https://img.shields.io/github/license/anthonynahas/ngx-storage-firebaseui.svg?style=flat-square)](https://github.com/AnthonyNahas/ngx-storage-firebaseui/blob/master/LICENSE)\n[![GitHub forks](https://img.shields.io/github/forks/anthonynahas/ngx-storage-firebaseui.svg?style=social\u0026label=Fork)](https://github.com/AnthonyNahas/ngx-storage-firebaseui/fork)\n[![GitHub stars](https://img.shields.io/github/stars/anthonynahas/ngx-storage-firebaseui.svg?style=social\u0026label=Star)](https://github.com/AnthonyNahas/ngx-storage-firebaseui)\n[![GitHub followers](https://img.shields.io/github/followers/anthonynahas.svg?style=social\u0026label=Follow)](https://github.com/AnthonyNahas/ngx-storage-firebaseui)\n[![Twitter URL](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/ngAnthonyy)\n[![Twitter Follow](https://img.shields.io/twitter/follow/ngAnthonyy.svg?style=social\u0026label=Follow)](https://twitter.com/ngAnthonyy)\n[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/gdi2290/awesome-angular)\n\n\n\nAngular UI component for [firebase](https://firebase.google.com/docs/auth/web/firebaseui) authentication.\nThis library is an angular module (including angular components and services) that allows to upload/download or event delete files \nfrom firebase storage within a firebase project. \n\n\n## Built by and for developers :heart:\nDo you have `any` question or suggestion ? Please do not hesitate to contact us!\nAlternatively, provide a PR | open an appropriate issue [here](https://github.com/anthonynahas/ngx-storage-firebaseui/issues)\n\nIf you like this project, support [ngx-storage-firebaseui](https://github.com/anthonynahas/ngx-storage-firebaseui)\nby starring :star: and sharing it :loudspeaker:\n\n## Table of Contents\n- [Why to use ngx-storage-firebaseui ?](#why-to-use-ngx-storage-firebaseui)\n- [Library's components](#components)\n- [Requirements](#requirements)\n- [Demo](#demo)\n- [Screenshots](#screenshots)\n- [Peer Dependencies](#peerDependencies)\n- [Dependencies](#dependencies)\n- [Firebase Cloud Functions and Firebase extensions](#firebase_requirements)\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Run Demo App Locally](docs/INSTRUCTIONS_DEMO.md)\n- [Other Angular Libraries](#other-angular-libraries)\n- [Support](#support)\n- [License](#license)\n\n\u003ca name=\"components\"/\u003e\n\n## Why to use ngx-storage-firebaseui ?\n- :gift_heart: it uses a responsive and accessible web design UX/UI from google material concepts and components (supporting desktop, tablet and mobile view) incl. smooth animations for a better UX.\n- :lipstick: pick up your own theme! change the primary, accent and warn colors whenever you need (e.g to support light and dark themes)\n- :ship: super easy to use with an angular based project (project that is created with the [angular-cli](https://cli.angular.io/))\n- :soon: optional configuration\n- :recycle: configure your components in runtime\n- :recycle: reusable components for every project that needs some uploads workflows with a firebase project/app.\n- :customs: built in feedback mechanism in form of a [snackbar](https://material.angular.io/components/snack-bar/overview) when an error or `any` important event occurred.\n- :sos: ability to delete files\n- :ghost: compatible with `ngx-auth-firebaseui` [learn more](https://github.com/AnthonyNahas/ngx-auth-firebaseui)\n- :fire: [Sync user's uploads with FIRESTORE](FIRESTORE_SYNC.md) **AUTOMATICALLY**\n- :tada: Supports SSR - Server Side Rendering\n- :soon: [support of i18n](https://ngx-storage-firebaseui.firebaseapp.com/i18n)\n\n\n\u003ca name=\"why-to-use-ngx-storage-firebaseui\"/\u003e\n\n## Library's components\n- `\u003cngx-storage-firebaseui-images\u003e` used to upload imaged to firebase storage and sync them with firestore \n\n\n## Supported Processes/Workflows and Actions:\n- upload images\n- image grid\n- delete image (soon)\n- pre-built firebase functions to auto-rotate images (soon)          \n\n\n\u003ca name=\"requirements\"/\u003e\n\n- [angular material theme](https://material.angular.io/guide/getting-started#step-4-include-a-theme)\n- [angular material icons](https://material.angular.io/guide/getting-started#step-6-optional-add-material-icons)\n- [angular cdk - v9.x](https://www.npmjs.com/package/@angular/cdk)\n- [angular material - v9.x](https://www.npmjs.com/package/@angular/material)\n- [angular animations - v9.x](https://www.npmjs.com/package/@angular/animations)\n- [angular router - v9.x](https://www.npmjs.com/package/@angular/router)\n- [angular flex-layout v9.0.0-beta.29](https://www.npmjs.com/package/@angular/flex-layout)\n- [@angular/fire - v5.4.x](https://www.npmjs.com/package/@angular/fire)\n- [firebase - v7.13.x](https://www.npmjs.com/package/firebase)\n\nthe full tutorial guide can be found [here](https://ngx-storage-firebaseui.firebaseapp.com/getting-started)\n\n\n\u003ca name=\"demo\"/\u003e\n\n##  [Demo](https://ngx-storage-firebaseui.firebaseapp.com/) |  [Features](https://ngx-storage-firebaseui.firebaseapp.com/features) | [Examples](https://ngx-storage-firebaseui.firebaseapp.com/examples)\n\n\n---\n\n\n\u003ca name=\"sreenshots\"/\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"384px\" style=\"text-align: center;\"\n  src=\"https://cdn.jsdelivr.net/gh/anthonynahas/ngx-storage-firebaseui@master/assets/v1/upload.gif\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg style=\"text-align: center;\"\n  src=\"https://cdn.jsdelivr.net/gh/anthonynahas/ngx-storage-firebaseui@master/assets/v1/1.png\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"384px\" style=\"text-align: center;\"\n  src=\"https://cdn.jsdelivr.net/gh/anthonynahas/ngx-storage-firebaseui@master/assets/v1/2.png\"\u003e\n\u003c/p\u003e\n\n---\n\n\u003ca name=\"peerDependencies\"/\u003e\n\n## Peer Dependencies - please make sure that peerDependencies are installed if you are not using the schematics\n\n```json\n\"peerDependencies\": {\n    \"@angular/core\": \"^9.x\",\n    \"@angular/animations\": \"^9.x\",\n    \"@angular/cdk\": \"^9.x\",\n    \"@angular/flex-layout\": \"^9.0.0-beta.29\",\n    \"@angular/material\": \"^9.x\",\n    \"@angular/fire\": \"5.4.x\",\n    \"firebase\": \"7.13.x\",\n  }\n```\n\n\n---\n\n\u003ca name=\"dependencies\"/\u003e\n\n## Dependencies\n* [Angular](https://angular.io) (*requires* Angular 2 or higher, developed with 9.x) - obviously\n\n\n\u003ca name=\"firebase_requirements\"/\u003e\n\nIn the following section, I will show you how to improve the user's experience regarding images \n\n## Install firebase extension - [Resize Images](https://firebase.google.com/products/extensions/storage-resize-images)\n\n1. install the storage resize images extension in your firebase project\n2. set your firebase cloud function's location\n3. pick either the default bucket or choose another one\n4. set size images: `50x50,100x100,200x200,500x500,1000x1000,2000x2000`\n5. choose whether to delete the original image (tip: don't do that so that you can regenerate the thumbnails)\n6. choose the cloud storage path for resized images `thumbs` (see below an example of an image directory in firebase storage)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"384px\" style=\"text-align: center;\"\n  src=\"https://cdn.jsdelivr.net/gh/anthonynahas/ngx-storage-firebaseui@master/assets/firebase_extensions/1.png\"\u003e\n\u003c/p\u003e\n\nafter installation\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"384px\" style=\"text-align: center;\"\n  src=\"https://cdn.jsdelivr.net/gh/anthonynahas/ngx-storage-firebaseui@master/assets/firebase_extensions/2.png\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"384px\" style=\"text-align: center;\"\n  src=\"https://cdn.jsdelivr.net/gh/anthonynahas/ngx-storage-firebaseui@master/assets/firebase_extensions/3.png\"\u003e\n\u003c/p\u003e\n\n## Upload firebase cloud functions to sync the uploaded images to firebase storage with firestore (`required`)\n\n1. `firebase init`\n2. init firebase cloud function in your firebase project (`typescript`)\n3. copy and paste the below functions\n4. upload `firbease deploy --only functions`\n\n```typescript\nimport * as functions from 'firebase-functions';\nimport * as admin from 'firebase-admin';\nimport { ObjectMetadata } from 'firebase-functions/lib/providers/storage';\n// tslint:disable-next-line:no-implicit-dependencies\nimport { Bucket, Storage } from '@google-cloud/storage';\n// @ts-ignore\n// tslint:disable-next-line:no-implicit-dependencies\nimport { GetSignedUrlResponse } from '@google-cloud/storage/build/src/file';\n\n\nconst path = require('path');\nconst os = require('os');\nconst fs = require('fs');\n// tslint:disable-next-line:no-implicit-dependencies\nconst spawn = require('child-process-promise').spawn;\n// tslint:disable-next-line:no-implicit-dependencies\nconst mkdirp = require('mkdirp-promise');\nconst storage = new Storage();\n\n\nconst firestore = admin.firestore();\nconst defaultStorage = admin.storage();\n// const defaultBucket = defaultStorage.bucket();\n\n/**\n * Firebase cloud function to sync uploaded images to firebase storage bucket with firestore\n * \n * @author Anthony Nahas\n * @since 03.2020\n * @version 1.0 \n */\nexport const syncImgsWithFirestore =\n  functions\n    .storage\n    .object()\n    .onFinalize(async (object: ObjectMetadata) =\u003e {\n\n      console.log('syncImgsWithFirestore is now running', object);\n\n      if (object \u0026\u0026 object.contentType \u0026\u0026 !object.contentType.includes('image')) {\n        console.log('exiting function');\n        return false;\n      }\n\n      let downloadURLs: any = null;\n      let downloadURL = null;\n      try {\n        downloadURLs = await getDownloadURL(object);\n        downloadURL = downloadURLs[0];\n        console.log('Download URL --\u003e ', downloadURL, typeof downloadURL);\n        // downloadURL = downloadURL[0];\n      } catch (e) {\n        console.error('Error while getting download url', e);\n      }\n      const filePath = object.name;\n      console.log('file path --\u003e', filePath);\n      // @ts-ignore\n      const pathSegments = filePath.split('/');\n      console.log('path segments --\u003e ', pathSegments);\n\n      const indexOfID = pathSegments.indexOf('imgs');\n      console.log('indexOfID', indexOfID, pathSegments[indexOfID + 1]);\n      const imgID = pathSegments[indexOfID + 1];\n      const lastSegment = pathSegments[pathSegments.length - 1];\n      console.log('lastSegment', lastSegment);\n      const nameSegments = lastSegment.split('_');\n      console.log('nameSegments', nameSegments);\n      const resize = nameSegments[nameSegments.length - 1];\n      console.log('resize', resize);\n      const size = resize.split('x')[0];\n      console.log('size', size, typeof size);\n\n      // const img: NahausImage = {\n      //   id: imgID,\n      //   downloadURL,\n      //   path: filePath\n      // };\n\n      const indexOfThumbs = pathSegments.indexOf('thumbs');\n      console.log('indexOfThumbs', indexOfThumbs);\n      let firestorePath: string;\n      if (indexOfThumbs !== -1) {\n        // the image is a thumbnail\n        firestorePath = pathSegments.splice(0, indexOfThumbs).join('/');\n        console.log('firestorePath', firestorePath);\n        const thumbsMapKey: string = `thumbs.${size}`;\n        return await firestore.doc(firestorePath).update({\n          [thumbsMapKey]: {\n            id: imgID,\n            downloadURL,\n            path: filePath\n          }\n        });\n      } else {\n        pathSegments.pop();\n        firestorePath = pathSegments.join('/');\n        console.log('firestorePath', firestorePath);\n        return await firestore.doc(firestorePath).set({\n          id: imgID,\n          downloadURL,\n          path: filePath\n        }, { merge: true });\n      }\n    });\n\nfunction getDownloadURL(object: ObjectMetadata): Promise\u003cGetSignedUrlResponse\u003e | void {\n  if (!object.name) {\n    return;\n  }\n  const bucket: Bucket = defaultStorage.bucket();\n  const file = bucket.file(object.name);\n\n  // Get a signed URL for the file\n  return file.getSignedUrl({\n    action: 'read',\n    expires: '03-17-2025'\n  });\n}\n\nexport const adjustOrientation = functions\n  .storage\n  .object()\n  .onFinalize(async (object) =\u003e {\n    const filePath = object.name;\n    const bucketName = object.bucket;\n    const metadata = object.metadata;\n\n    const tempLocalFile = path.join(os.tmpdir(), filePath);\n    const tempLocalDir = path.dirname(tempLocalFile);\n    const bucket = storage.bucket(bucketName);\n\n    if (object \u0026\u0026 object.contentType \u0026\u0026 !object.contentType.startsWith('image/')) {\n      console.log('This is not an image.');\n      return null;\n    }\n\n    if (metadata \u0026\u0026 metadata.autoOrient) {\n      console.log('This is already rotated');\n      return null;\n    }\n\n    return mkdirp(tempLocalDir).then(() =\u003e {\n      // Download file from bucket.\n      // @ts-ignore\n      return bucket.file(filePath).download({ destination: tempLocalFile });\n    }).then(() =\u003e {\n      console.log('The file has been downloaded to', tempLocalFile);\n      // Convert the image using ImageMagick.\n      return spawn('convert', [tempLocalFile, '-auto-orient', tempLocalFile]);\n    }).then(() =\u003e {\n      console.log('rotated image created at', tempLocalFile);\n      // @ts-ignore\n      metadata.autoOrient = true;\n      return bucket.upload(tempLocalFile, {\n        destination: filePath,\n        metadata: { metadata: metadata }\n      });\n    }).then(() =\u003e {\n      console.log('image uploaded to Storage at', filePath);\n      // Once the image has been converted delete the local files to free up disk space.\n      fs.unlinkSync(tempLocalFile);\n      console.log('Deleted local file', filePath);\n      return;\n    });\n  });\n\n```\n\n\n\n\n\n\u003ca name=\"installation\"/\u003e\n\n## (1) [Installation](https://ngx-storage-firebaseui.firebaseapp.com/getting-started)\n\n## 1. Install via *ng add*. (Recommended)\n\nIf Angular Material Design is not setup, just run `ng add @angular/material` [learn more](https://material.angular.io/guide/getting-started)\n\nNow add the library via the `angular schematics`\n```shell\nng add ngx-storage-firebaseui\n```\n\n- :heavy_check_mark: peer dependencies will be automatically added the package.json and installed\n- :heavy_check_mark:  `ngx-storage-firebaseui` 's module will be automatically imported to the root module (just replace `PUT_YOUR_FIREBASE_API_KEY_HERE` with your firebase api key)\n- :heavy_check_mark: `ngx-storage-firebaseui` 's assets will be automatically added the `angular.json` file\n\n## 2. Install via *npm*. (Alternative)\n\nInstall above dependencies via *npm*.\n\nNow install `ngx-storage-firebaseui` via:\n```shell\nnpm install --save ngx-storage-firebaseui\n```\n\n```bash\nnpm i -s @angular/material @angular/cdk @angular/flex-layout @angular/forms @angular/animations @angular/router\n```\n\nFirebase deps\n```bash\nnpm i -s firebase @angular/fire\n```\n\n` -\u003e continue by following the instructions ` [here](https://github.com/anthonynahas/ngx-storage-firebaseui/tree/master/docs/INSTRUCTIONS.md)\n\nOnce installed you need to import the main module:\n```js\nimport { NgxStorageFirebaseuiModule } from 'ngx-storage-firebaseui';\n```\nThe only remaining part is to list the imported module in your application module. The exact method will be slightly\ndifferent for the root (top-level) module for which you should end up with the code similar to (notice ` NgxStorageFirebaseuiModule .forRoot()`):\n\n\nand then from your Angular `AppModule`:\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n// Import your library\nimport { NgxStorageFirebaseuiModule } from 'ngx-storage-firebaseui';\nimport {BrowserAnimationsModule} from '@angular/platform-browser/animations';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    BrowserAnimationsModule,\n\n    // Specify the ngx-storage-firebaseui library as an import\n    NgxStorageFirebaseuiModule.forRoot({\n                    apiKey: 'your-firebase-apiKey',\n                    authDomain: 'your-firebase-authDomain',\n                    databaseURL: 'your-firebase-databaseURL',\n                    projectId: 'your-firebase-projectId',\n                    storageBucket: 'your-firebase-storageBucket',\n                    messagingSenderId: 'your-firebase-messagingSenderId'\n                }),\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n```\n\nOther modules in your application can simply import ` NgxStorageFirebaseuiModule `:\n\n```js\nimport { NgxStorageFirebaseuiModule } from 'ngx-storage-firebaseui';\n\n@NgModule({\n  declarations: [OtherComponent, ...],\n  imports: [NgxStorageFirebaseuiModule, ...],\n})\nexport class OtherModule {\n}\n```\n\n---\n##### SystemJS\n\u003e**Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle.\nIn your systemjs config file, `map` needs to tell the System loader where to look for `ngx-storage-firebaseui`:\n```js\n{\n  'ngx-storage-firebaseui';: 'node_modules/ngx-storage-firebaseui/bundles/ngx-storage-firebaseui.umd.js',\n}\n```\n\n\n## (3) [Usage](https://ngx-storage-firebaseui.firebaseapp.com/getting-started)\n\nOnce the library is imported, you can use its components, directives and pipes in your Angular application:\n\n### `\u003cngx-storage-firebaseui-images\u003e\u003c/ngx-storage-firebaseui-images\u003e` [see the usage](https://github.com/AnthonyNahas/ngx-storage-firebaseui/blob/master/docs/ngx-storage-firebaseui.md#usage)\n\n\n\u003ca name=\"api\"/\u003e\n\n## API\n\n### `\u003cngx-storage-firebaseui-images\u003e\u003c/ngx-storage-firebaseui-images\u003e` [see the api](https://github.com/AnthonyNahas/ngx-storage-firebaseui/blob/master/docs/ngx-storage-firebaseui.md#api)\n\n\n| option | bind  |  type  |   default    | description  |\n|:---------------------|:------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|\n| path                        | `Input()`  | `string` | - | path to store the image into firebase storage as well as in the firestore\n| load                        | `Input()`  | `boolean` | `true` | whether to load the uploaded images from firebase  \n| addButtonTooltipText        | `Input()`  | `string` | `add picture` | text of the add button tooltip \n| onLoad                      | `Output()`  | `number`  | - | called when the images are loaded from firestore\n| onImageUploaded             | `Output()`  | `number`  | - | called when an image is uploaded to firebase storage\n| onImageSelectedAtIndex      | `Output()`  | `number`  | - | called when an image is selected / clicked\n\n\n\n## Other Angular Libraries\n- [ngx-auth-firebaseui](https://github.com/anthonynahas/ngx-auth-firebaseui)\n- [ngx-linkifyjs](https://github.com/anthonynahas/ngx-linkifyjs)\n- [@angular-material-extensions/password-strength](https://github.com/angular-material-extensions/password-strength)\n- [@angular-material-extensions/google-maps-autocomplete](https://github.com/angular-material-extensions/google-maps-autocomplete)\n- [@angular-material-extensions/fab-menu](https://github.com/angular-material-extensions/fab-menu)\n- [@angular-material-extensions/select-country](https://github.com/angular-material-extensions/select-country)\n- [@angular-material-extensions/pages](https://github.com/angular-material-extensions/pages)\n- [@angular-material-extensions/link-preview](https://github.com/angular-material-extensions/link-preview)\n- [@angular-material-extensions/contacts](https://github.com/angular-material-extensions/contacts)\n- [@angular-material-extensions/faq](https://github.com/angular-material-extensions/faq)\n- [angular-material-extensions/freelancer-theme](https://github.com/angular-material-extensions/freelancer-theme)\n- [@firebaseui/ng-bootstrap](https://github.com/firebaseui/ng-bootstrap)\n\n---\n\n\u003ca name=\"support\"/\u003e\n\n## Support\n+ Drop an email to: [Anthony Nahas](mailto:anthony.na@hotmail.de)\n+ or open an appropriate [issue](https://github.com/anthonynahas/ngx-storage-firebaseui/issues)\n+ let us chat on [Gitter](https://gitter.im/ngx-auth-firebaseui/Lobby)\n\n Built by and for developers :heart: we will help you :punch:\n\n---\n\n![jetbrains logo](assets/jetbrains-variant-4_logos/jetbrains-variant-4.png)\n\nThis project is supported by [jetbrains](https://www.jetbrains.com/) with 1 ALL PRODUCTS PACK OS LICENSE incl. [webstorm](https://www.jetbrains.com/webstorm)\n\n---\n\n\u003ca name=\"license\"/\u003e\n\n## License\n\nCopyright (c) 2020 [Anthony Nahas](https://github.com/AnthonyNahas). Licensed under the MIT License (MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonynahas%2Fngx-storage-firebaseui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanthonynahas%2Fngx-storage-firebaseui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonynahas%2Fngx-storage-firebaseui/lists"}