Add support for uiShow Callback #133

Author: RaphaelJenni

CHANGELOG.MD

@@ -1,4 +1,7 @@
 # Changelog
+## 5.0.1
+* Add support for uiShow Callback [#133](https://github.com/RaphaelJenni/FirebaseUI-Angular/issues/133)
+
 ## 5.0.0
 * Upgrade library to support @angular/fire@6.0.0 [#121](https://github.com/RaphaelJenni/FirebaseUI-Angular/issues/121)
 

README.MD

@@ -13,7 +13,7 @@ To install this library, run:
 $ npm install firebaseui-angular --save
 ```
 
-To run this library you need to have [AngularFire2](https://github.com/angular/angularfire2), [Firebase](https://firebase.google.com/docs/web/setup), 
+To run this library you need to have [AngularFire2](https://github.com/angular/angularfire2), [Firebase](https://firebase.google.com/docs/web/setup),
 [FirebaseUI-Web](https://github.com/firebase/firebaseui-web) installed.
 Fast install:
 ```bash
@@ -203,7 +203,8 @@ Don't forget to unsubscribe at the end.
 ```html
 <firebase-ui
     (signInSuccessWithAuthResult)="successCallback($event)"
-    (signInFailure)="errorCallback($event)"></firebase-ui>
+    (signInFailure)="errorCallback($event)"
+    (uiShown)="uiShownCallback()"></firebase-ui>
 ```
 
 ```typescript
@@ -213,7 +214,11 @@ successCallback(signInSuccessData: FirebaseUISignInSuccessWithAuthResult) {
 
 errorCallback(errorData: FirebaseUISignInFailure) {
     ...
-}  
+}
+
+uiShownCallback() {
+    ...
+}
 ```
 
 ### Disable autosign
@@ -272,7 +277,7 @@ If you have added the css to the angular.json but nothing happened. Try to resta
 ### ERROR in ./~/firebase/app/shared_promise.js
 
  This is a know issue in the firebase project. To fix that (for now), do that:
- 
+
 `npm install promise-polyfill --save-exact`
 
 ### `http://localhost:4200/images/buffer.svg?embed` 404 (Not Found)

projects/firebaseui-angular-library/src/lib/firebaseui-angular-library.component.ts

@@ -21,6 +21,7 @@ export class FirebaseuiAngularLibraryComponent implements OnInit, OnDestroy {
 
   @Output('signInSuccessWithAuthResult') signInSuccessWithAuthResultCallback: EventEmitter<FirebaseUISignInSuccessWithAuthResult> = new EventEmitter(); // tslint:disable-line
   @Output('signInFailure') signInFailureCallback: EventEmitter<FirebaseUISignInFailure> = new EventEmitter(); // tslint:disable-line
+  @Output('uiShown') uiShownCallback: EventEmitter<void> = new EventEmitter(); // tslint:disable-line
 
   private subscription: Subscription;
 
@@ -84,8 +85,8 @@ export class FirebaseuiAngularLibraryComponent implements OnInit, OnDestroy {
     }
   }
 
-  private getCallbacks(): any {
-    const signInSuccessWithAuthResult = (authResult: UserCredential, redirectUrl) => {
+  private getCallbacks(): any { // firebaseui.Callbacks
+    const signInSuccessWithAuthResultCallback = (authResult: UserCredential, redirectUrl) => {
       this.ngZone.run(() => {
         this.signInSuccessWithAuthResultCallback.emit({
           authResult,
@@ -105,9 +106,16 @@ export class FirebaseuiAngularLibraryComponent implements OnInit, OnDestroy {
       return Promise.reject();
     };
 
+    const uiShownCallback = () => {
+      this.ngZone.run(() => {
+        this.uiShownCallback.emit();
+      });
+    };
+
     return {
-      signInSuccessWithAuthResult: signInSuccessWithAuthResult,
+      signInSuccessWithAuthResult: signInSuccessWithAuthResultCallback,
       signInFailure: signInFailureCallback,
+      uiShown: uiShownCallback
     };
   }
 }

src/app/main/main.component.html

@@ -1,5 +1,6 @@
 <h1>FirebaseUI-Angular Sample</h1>
 <firebase-ui (signInSuccessWithAuthResult)="successCallback($event)"
-             (signInFailure)="errorCallback($event)"></firebase-ui>
+             (signInFailure)="errorCallback($event)"
+             (uiShown)="uiShownCallback()"></firebase-ui>
 <button (click)="logout()">Logout</button>
 <button [routerLink]="['/page']">To second page</button>

src/app/main/main.component.ts

@@ -31,4 +31,7 @@ export class MainComponent implements OnInit {
     console.warn('errorCallback', data);
   }
 
+  uiShownCallback() {
+    console.log('UI shown');
+  }
 }