title: How can I correctly configure FirebaseUI into my Angular project?
body: <p>I am working on an Angular application and I have the following doubt.
  This application uses the FirebaseUI library to handle the Firebase authentication. In the past, I have used it configuring it directly into my <strong>login</strong> component. This time I am following the official guide configuring it directly into the <strong>app.module.ts</strong> file (what solution is better?)</p>
  <p>So into my <strong>app.module.ts</strong> file now I have something like this:</p>
  <pre><code>import {
      BrowserModule
  } from '@angular/platform-browser';
  import {
      NgModule
  } from '@angular/core';
  import {
      FormsModule
  } from '@angular/forms';
  import {
      AppComponent
  } from './app.component';
  import {
      firebase,
      firebaseui,
      FirebaseUIModule
  } from 'firebaseui-angular';
  import {
      environment
  } from '../environments/environment';
  import {
      AppRoutingModule
  } from './app-routing.module';
  import {
      AngularFireModule
  } from '@angular/fire';
  import {
      AngularFireAuth,
      AngularFireAuthModule
  } from '@angular/fire/auth';
  import {
      BrowserAnimationsModule
  } from '@angular/platform-browser/animations';
  
  
  import {
      HomeComponent
  } from './home/home.component';
  import {
      LoginComponent
  } from './login/login.component';
  import {
      SidebarComponent
  } from './sidebar/sidebar.component';
  
  import {
      ButtonModule
  } from 'primeng/button';
  import {
      SidebarModule
  } from 'primeng/sidebar';
  
  
  const firebaseUiAuthConfig: firebaseui.auth.Config = {
      signInFlow: 'popup',
      signInOptions: [
          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          firebase.auth.EmailAuthProvider.PROVIDER_ID
  
      ],
      //tosUrl: '&lt;your-tos-link&gt;',
      //privacyPolicyUrl: '&lt;your-privacyPolicyUrl-link&gt;',
      credentialHelper: firebaseui.auth.CredentialHelper.NONE
  };
  
  
  @NgModule({
      declarations: [
          AppComponent,
          HomeComponent,
          LoginComponent,
          SidebarComponent
      ],
      imports: [
          BrowserModule,
          BrowserAnimationsModule,
          AppRoutingModule,
          ButtonModule,
          AngularFireModule.initializeApp(environment.firebaseConfig),
          AngularFireAuthModule,
          FirebaseUIModule.forRoot(firebaseUiAuthConfig),
  
          SidebarModule
      ],
      providers: [],
      bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  <p>It works fine. My doubt is related to how I can set a custom name for the tag related to the FirebaseUI component.</p>
  <p>As said into another project I configured it directly into my loging component, something like this:</p>
  <pre><code>@Component({
      selector: 'login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit, OnDestroy {
  
      ui: firebaseui.auth.AuthUI;
  
      constructor(private afAuth: AngularFireAuth,
          private router: Router,
          private ngZone: NgZone) {
  
      }
  
      ngOnInit() {
  
          const uiConfig = {
              signInOptions: [
                  firebase.auth.GoogleAuthProvider.PROVIDER_ID,
                  firebase.auth.EmailAuthProvider.PROVIDER_ID
              ],
              callbacks: {
  
                  signInSuccessWithAuthResult: this
                      .onLoginSuccessful
                      .bind(this)
              }
  
          };
  
          this.ui = new firebaseui.auth.AuthUI(this.afAuth.auth);
  
          this.ui.start('#firebaseui-auth-container', uiConfig);
  
  
      }
  
      ngOnDestroy() {
          this.ui.delete();
      }
  
      onLoginSuccessful(result) {
  
          console.log(&quot;Firebase UI result:&quot;, result);
  
          //this.ngZone.run(() =&gt; this.router.navigateByUrl('/work-shift-allocator'));
          this.ngZone.run(() =&gt; this.router.navigate(['/work-shift-allocator']));
  
          //this.router.navigate(['/heroes', { id: itemId }]);
  
      }
  }
  </code></pre>
  <p>As you can see in this last snippet (related to another project) I am configuring it into my component declaring the ** ui: firebaseui.auth.AuthUI;** variable and then set on it the value of the tag by:</p>
  <pre><code>this.ui.start('#firebaseui-auth-container', uiConfig);
  </code></pre>
  <p>I want to know if and how I can do the same thing also in this project where I declared the FirebaseUI configuration directly into the <strong>app.module.ts</strong> file.</p>