ngx-auth-firebaseui-avatar.md

ngx-auth-firebaseui - Open Source Library for Angular Web Apps to integrate a material user interface for firebase authentication.

Angular UI component for firebase authentication. This library is an angular module (including angular components and services) that allows to authenticate your users with your firebase project. NgxAuthFirebseUI is compatible with angular material and angular flexLayout.

If you prefer to develop with bootstrap rather than with material design, please check this project @firebaseui/ng-bootstrap

Built by and for developers ❤️

Do you have any question or suggestion ? Please do not hesitate to contact us! Alternatively, provide a PR | open an appropriate issue here

If you like this project, support ngx-auth-firebaseui by starring ⭐ and sharing it 📢

Table of Contents

• overview
• Usage
• API
• Other Angular Libraries
• Support
• License

Overview <ngx-auth-firebaseui-avatar> used to display/edit the data of the current authenticated user in the toolbar

Usage

<ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar>

or more advanced

<mat-toolbar color="primary">
  <span>Your Title</span>
  <span fxFlex></span>
  <ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar>
</mat-toolbar>

API

option	bind	type	default	description
canLogout	Input()	boolean	true	whether to render the logout button
links	Input()	LinkMenuItem[]	-	additional routes and links to add to the component
mode	Input()	`string: 'default'	'simple'`	default
canViewAccount	Input()	boolean	true	whether to render the profile button to view account
canDeleteAccount	Input()	boolean	true	whether to render the delete account button
canEditAccount	Input()	boolean	true	whether to render the edit account button
textProfile	Input()	string	Profile	text at the profile button
textSignOut	Input()	string	Sign Out	text at the sign out button
onSignOut	Output()	void	-	this will be fired when the user signs out

import {LinkMenuItem} from 'ngx-auth-firebaseui';

links: LinkMenuItem[];

 ngOnInit(): void {
    this.links = [
      {icon: 'home', text: 'Home', callback: this.printLog},
      {icon: 'favorite', text: 'Favorite', callback: this.printLog},
      {icon: 'add', text: 'Add', callback: this.printLog},
    ];
  }

<ngx-auth-firebaseui-avatar [links]="links"></ngx-auth-firebaseui-avatar>

Other Angular Libraries

• @firebaseui/ng-bootstrap
• ngx-linkifyjs
• @angular-material-extensions/components
• @angular-material-extensions/password-strength
• @angular-material-extensions/google-maps-autocomplete
• @angular-material-extensions/pages
• @angular-material-extensions/link-preview
• @angular-material-extensions/contacts
• @angular-material-extensions/faq
• @angular-material-extensions/jumbotron
• angular-material-extensions/freelancer-theme
• @angular-material-extensions/combination-generator

---

Support

• Drop an email to: Anthony Nahas
• or open an appropriate issue
• let us chat on Gitter

Built by and for developers ❤️ we will help you 👊

---

This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm

---

License

Copyright (c) 2019 Anthony Nahas. Licensed under the MIT License (MIT)