title: Can't bind to 'ngIF' since it isn't a known property of 'ion-item'
body: <p>I need to use *ngIF inside the code of my ionic4 project, found some answers but none works as none is targeting <code>ionic 4</code> and <code>angular 7</code>.</p>
  
  <p>and I tried to import the <code>imports: [CommonModule]</code> part but it didn't work at all.</p>
  
  <p>Here is the code am using in <code>.html</code> file :</p>
  
  <pre><code>&lt;ion-app&gt;
      &lt;ion-split-pane&gt;
          &lt;ion-menu&gt;
              &lt;ion-header&gt;
                  &lt;ion-toolbar color="medium"&gt;
                      &lt;ion-title&gt;Menu&lt;/ion-title&gt;
                  &lt;/ion-toolbar&gt;
              &lt;/ion-header&gt;
              &lt;ion-content background="medium"&gt;
                  &lt;ion-list&gt;
                      &lt;ion-menu-toggle auto-hide="false"&gt;
                          &lt;ion-item routerLink='/home'&gt;
                              &lt;ion-icon color="light" slot="start" name="home"&gt;&lt;/ion-icon&gt;
                              &lt;ion-label color="light"&gt;
                                  Home
                              &lt;/ion-label&gt;
                          &lt;/ion-item&gt;
                          &lt;ion-item routerLink='/list'&gt;
                              &lt;ion-icon color="light" slot="start" name="woman"&gt;&lt;/ion-icon&gt;
                              &lt;ion-label color="light"&gt;
                                  Buy / Rent a Dress
                              &lt;/ion-label&gt;
                          &lt;/ion-item&gt;
                          &lt;ion-item routerLink='/add-dress'&gt;
                              &lt;ion-icon color="light" slot="start" name="add"&gt;&lt;/ion-icon&gt;
                              &lt;ion-label color="light"&gt;
                                  Add Dress for Sale/Rental
                              &lt;/ion-label&gt;
                          &lt;/ion-item&gt;
                          &lt;ion-item routerLink='/create-account'&gt;
                              &lt;ion-icon color="light" slot="start" name="person-add"&gt;&lt;/ion-icon&gt;
                              &lt;ion-label color="light"&gt;
                                  Register New Account
                              &lt;/ion-label&gt;
                          &lt;/ion-item&gt;
                          &lt;ion-item routerLink='/login' *ngIF='authenticatedState()'&gt;
                              &lt;ion-icon color="light" slot="start" name="log-in"&gt;&lt;/ion-icon&gt;
                              &lt;ion-label color="light"&gt;
                                  Login to your account
                              &lt;/ion-label&gt;
                          &lt;/ion-item&gt;
                      &lt;/ion-menu-toggle&gt;
                  &lt;/ion-list&gt;
              &lt;/ion-content&gt;
          &lt;/ion-menu&gt;
          &lt;ion-router-outlet main&gt;&lt;/ion-router-outlet&gt;
      &lt;/ion-split-pane&gt;
  &lt;/ion-app&gt;
  </code></pre>
  
  <p>and I have this code in my <code>.ts</code> file:</p>
  
  <pre><code>import {Component} from '@angular/core';
  import { Storage } from '@ionic/storage';
  import {Platform} from '@ionic/angular';
  import {SplashScreen} from '@ionic-native/splash-screen/ngx';
  import {StatusBar} from '@ionic-native/status-bar/ngx';
  import { AuthServiceService } from './auth-service.service';
  
  @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styleUrls: ['main.scss'],
  })
  export class AppComponent {
  
      constructor(
          private platform: Platform,
          private splashScreen: SplashScreen,
          private statusBar: StatusBar,
          private storage: Storage,
          private authService: AuthServiceService,
      ) {
          this.initializeApp();
      }
      public appPages = [
          {
              title: 'Home',
              url: '/home',
              icon: 'home'
          },
          {
              title: 'Buy / Rent a Dress',
              url: '/list',
              icon: 'woman'
          },
          {
              title: 'Add Dress for Sale/Rental',
              url: '/add-dress',
              icon: 'add'
          },
          {
              title: 'Register New Account',
              url: '/create-account',
              icon: 'person-add'
          },
          {
              title: 'Login to your account',
              url: '/login',
              icon: 'log-in'
          },
  
      ];
  
      initializeApp() {
          this.platform.ready().then(() =&gt; {
              this.statusBar.styleDefault();
              this.splashScreen.hide();
          });
      }
      authenticatedState() {
          return this.authService.authenticated();
      }
  }
  
  </code></pre>
  
  <p>And as you see the *ngIf is calling a function that calls a service that returns a <code>True</code> or <code>False</code>.</p>
  
  <p>the error I get is like :</p>
  
  <p><code>Can't bind to 'ngIF' since it isn't a known property of 'ion-item'</code></p>