fix(angular): Forms use input event emitter to handle conditional rendering

Author: Ehesp

examples/angular/src/app/app.component.ts

@@ -34,11 +34,7 @@ import { injectUI } from "@invertase/firebaseui-angular";
     } @else {
       <div class="max-w-sm mx-auto pt-36 space-y-6 pb-36">
         <div class="text-center space-y-4">
-          <img
-            src="/firebase-logo-inverted.png"
-            alt="Firebase UI"
-            class="hidden dark:block h-36 mx-auto"
-          />
+          <img src="/firebase-logo-inverted.png" alt="Firebase UI" class="hidden dark:block h-36 mx-auto" />
           <img src="/firebase-logo.png" alt="Firebase UI" class="block dark:hidden h-36 mx-auto" />
           <p class="text-sm text-gray-700 dark:text-gray-300">
             Welcome to Firebase UI, choose an example screen below to get started!
@@ -80,38 +76,26 @@ export class UnauthenticatedAppComponent {
   template: `
     <div class="max-w-sm mx-auto pt-36 space-y-6 pb-36">
       <div class="border border-neutral-200 dark:border-neutral-800 rounded-md p-4 space-y-4">
-        <h1 class="text-md font-medium">
-          Welcome, {{ user().displayName || user().email || user().phoneNumber }}
-        </h1>
+        <h1 class="text-md font-medium">Welcome, {{ user().displayName || user().email || user().phoneNumber }}</h1>
         @if (user().email) {
           @if (user().emailVerified) {
             <div class="text-green-500">Email verified</div>
           } @else {
-            <button
-              class="bg-red-500 text-white px-3 py-1.5 rounded text-sm"
-              (click)="verifyEmail()"
-            >
+            <button class="bg-red-500 text-white px-3 py-1.5 rounded text-sm" (click)="verifyEmail()">
               Verify Email &rarr;
             </button>
           }
         }
         <hr class="opacity-30" />
         <h2 class="text-sm font-medium">Multi-factor Authentication</h2>
         @for (factor of mfaFactors(); track factor.factorId) {
-          <div>
-            {{ factor.factorId }} - {{ factor.displayName }}
-          </div>
+          <div>{{ factor.factorId }} - {{ factor.displayName }}</div>
         }
-        <button
-          class="bg-blue-500 text-white px-3 py-1.5 rounded text-sm"
-          (click)="navigateToMfa()"
-        >
+        <button class="bg-blue-500 text-white px-3 py-1.5 rounded text-sm" (click)="navigateToMfa()">
           Add MFA Factor &rarr;
         </button>
         <hr class="opacity-30" />
-        <button class="bg-blue-500 text-white px-3 py-1.5 rounded text-sm" (click)="signOut()">
-          Sign Out &rarr;
-        </button>
+        <button class="bg-blue-500 text-white px-3 py-1.5 rounded text-sm" (click)="signOut()">Sign Out &rarr;</button>
       </div>
     </div>
   `,
@@ -148,12 +132,7 @@ export class AuthenticatedAppComponent {
 @Component({
   selector: "app-root",
   standalone: true,
-  imports: [
-    CommonModule,
-    RouterModule,
-    ThemeToggleComponent,
-    PirateToggleComponent,
-  ],
+  imports: [CommonModule, RouterModule, ThemeToggleComponent, PirateToggleComponent],
   templateUrl: "./app.component.html",
 })
 export class AppComponent {}

examples/angular/src/app/components/pirate-toggle/pirate-toggle.component.ts

@@ -49,4 +49,3 @@ export class PirateToggleComponent {
     }
   }
 }
-

examples/angular/src/app/components/screen-route-layout/screen-route-layout.component.ts

@@ -38,4 +38,3 @@ import { RouterModule } from "@angular/router";
   styles: [],
 })
 export class ScreenRouteLayoutComponent {}
-

examples/angular/src/app/components/theme-toggle/theme-toggle.component.ts

@@ -57,7 +57,6 @@ export class ThemeToggleComponent {
     const htmlElement = document.documentElement;
     const isDark = htmlElement.classList.contains("dark");
     htmlElement.classList.toggle("dark", !isDark);
-    localStorage['theme'] = htmlElement.classList.contains("dark") ? "dark" : "light";
+    localStorage["theme"] = htmlElement.classList.contains("dark") ? "dark" : "light";
   }
 }
-

examples/angular/src/app/pirate.ts

@@ -93,4 +93,3 @@ export const pirate = registerLocale("pirate", {
     mfaTotpEnrollmentVerificationPrompt: "Add the code generated by yer authenticator app, arrr!",
   },
 });
-

examples/angular/src/app/routes.ts

@@ -68,8 +68,7 @@ export const routes: RouteConfig[] = [
     name: "Email Link Auth Screen",
     description: "A screen allowing a user to send an email link for sign in.",
     path: "/screens/email-link-auth-screen",
-    loadComponent: () =>
-      import("./screens/email-link-auth-screen").then((m) => m.EmailLinkAuthScreenWrapperComponent),
+    loadComponent: () => import("./screens/email-link-auth-screen").then((m) => m.EmailLinkAuthScreenWrapperComponent),
   },
   {
     name: "Email Link Auth Screen (with OAuth)",
@@ -110,8 +109,7 @@ export const routes: RouteConfig[] = [
     name: "Phone Auth Screen (with OAuth)",
     description: "A screen allowing a user to sign in with a phone number, with oAuth buttons.",
     path: "/screens/phone-auth-screen-w-oauth",
-    loadComponent: () =>
-      import("./screens/phone-auth-screen-w-oauth").then((m) => m.PhoneAuthScreenWithOAuthComponent),
+    loadComponent: () => import("./screens/phone-auth-screen-w-oauth").then((m) => m.PhoneAuthScreenWithOAuthComponent),
   },
 ] as const;
 
@@ -123,4 +121,3 @@ export const hiddenRoutes: RouteConfig[] = [
     loadComponent: () => import("./screens/mfa-enrollment-screen").then((m) => m.MfaEnrollmentScreenComponent),
   },
 ] as const;
-

examples/angular/src/app/screens/email-link-auth-screen-w-oauth/email-link-auth-screen-w-oauth.component.ts

@@ -30,4 +30,3 @@ import { EmailLinkAuthScreenComponent, GoogleSignInButtonComponent } from "@inve
   styles: [],
 })
 export class EmailLinkAuthScreenWithOAuthComponent {}
-

examples/angular/src/app/screens/email-link-auth-screen-w-oauth/index.ts

@@ -1,2 +1 @@
 export * from "./email-link-auth-screen-w-oauth.component";
-

examples/angular/src/app/screens/forgot-password-auth-screen-w-handlers/forgot-password-auth-screen-w-handlers.component.ts

@@ -47,4 +47,3 @@ export class ForgotPasswordAuthScreenWithHandlersComponent {
     this.router.navigate(["/screens/sign-up-auth-screen"]);
   }
 }
-

examples/angular/src/app/screens/forgot-password-auth-screen-w-handlers/index.ts

@@ -1,2 +1 @@
 export * from "./forgot-password-auth-screen-w-handlers.component";
-