AngularDart throws error while implementing firebase login

Question

I am trying to implement firebase google login in my AngularDart project but while implementing angular dart throws an error. I have rechecked for the *ngIftypo but unable to find the needful required.

Kindly help me with this thank you.

Error running TemplateGenerator for 
my_app|lib/views/layout_component/layout_component.dart.
Error: Template parse errors:
line 32, column 35 of LayoutComponent: ParseErrorLevel.FATAL: Can't bind to 
'ngIf' since it isn't a known native property or known directive. Please fix 
typo or add to directives list.
*ngIf="fbService.user == null"
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
line 32, column 17 of LayoutComponent: ParseErrorLevel.FATAL: Property 
binding ngIf not used by any directive on an embedded template
<div id="sign-in" *ngIf="fbService.user == null" class="horiz">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
line 37, column 36 of LayoutComponent: ParseErrorLevel.FATAL: Can't bind to 
'ngIf' since it isn't a known native property or known directive. Please fix 
typo or add to directives list.
*ngIf="fbService.user != null"
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
line 37, column 17 of LayoutComponent: ParseErrorLevel.FATAL: Property 
binding ngIf not used by any directive on an embedded template
<div id="sign-out" *ngIf="fbService.user != null" class="horiz">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

app_component.dart

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:your_next_startup/views/layout_component/layout_component.dart';
import 'package:your_next_startup/services/firebase_service.dart';

@Component(
  selector: 'my-app',
  styleUrls: const ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: const [
    materialDirectives,
    LayoutComponent,
  ],
  providers: const [
    materialProviders,
    FirebaseService,
  ],
)
class AppComponent {
  final FirebaseService fbService;

  AppComponent(FirebaseService this.fbService);

}

layout_component.dart

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:m_app/services/firebase_service.dart';

@Component(
  selector: 'app-layout',
  styleUrls: const [
        'layout_component.css',
  ],
  templateUrl: 'layout_component.html',
  directives: const [
    materialDirectives,
  ],
  providers: const [
    FirebaseService,
  ],
)
class LayoutComponent {
  final FirebaseService fbService;
  LayoutComponent(FirebaseService this.fbService);
}

layout_component.html

<div class="horiz">
            <div id="sign-in" *ngIf="fbService.user == null" class="horiz">
                <div id="google-icon" class="icon"></div>
                <button class="btn btn-outline-secondary btn-sm" (click)="fbService.signIn()">Google Sign In</button>
            </div>

            <div id="sign-out" *ngIf="fbService.user != null" class="horiz">
                <img class="icon" [src]="fbService.user?.photoURL">
                <div id="user-name">{{fbService.user?.displayName}}</div>
                <button class="btn btn-outline-secondary btn-sm" (click)="fbService.signOut()">Sign Out</button>
            </div>
        </div>

Answer 1

That doesn't seem to be related to firebase.

@Component(
  selector: 'app-layout',
  styleUrls: const [
        'layout_component.css',
  ],
  templateUrl: 'layout_component.html',
  directives: const [
    materialDirectives,
    NgIf,              // one of these two
    COMMON_DIRECTIVES, // this one includes NgIf, NgFor, NgSwitchCase, ...  
  ],
  providers: const [
    FirebaseService,
  ],
)
class LayoutComponent {
  final FirebaseService fbService;
  LayoutComponent(FirebaseService this.fbService);
}

In Angular 3 and earlier directives could be registered in pubspec.yaml for the whole application, this isn't supported anymore and all used directives need to be registered in the components annotation where they are used.