title: The component declaration, template variable declarations, and element references do not contain such a member
body: <p>this is probably a simple fix.  The element is supposed to slide out from the top of the page on hover. My code is working as intended, but I am getting this error.</p>
  
  <p>error:</p>
  
  <pre><code>[Angular] Identifier 'compartmentOpen' is not defined. The component declaration, template variable declarations, and element references do not contain such a member
  </code></pre>
  
  <p>I've tried defining it in the template on the element with the ngIf like this: #compartmentOpen
  It makes the error go away but then the code doesn't run because its trying to get the truthiness of the entire element.</p>
  
  <p>I've also tried defining it like this:
  compartmentOpen;
  in the component, but that doesn't do anything.</p>
  
  <p>template:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div #compartmentOpen
      (mouseover)="compartmentOpen = true"
      (mouseout)="compartmentOpen = false"
      class="inner-container"&gt;
  
  
  
      &lt;div class="grid-center"&gt;
  
        &lt;div class="z-bottom"
          *ngIf="compartmentOpen"&gt; Facebook Login coming soon!
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
        &lt;/div&gt;
  
  
        &lt;button (click)="googleLogin()"
          class="btn btn-primary google-btn-size animated bounce"&gt;
          Login with Google
        &lt;/button&gt;
        &lt;br&gt;
  
        &lt;div id="wave"&gt;
          &lt;span class="dot dot-ani"&gt;&lt;/span&gt;
          &lt;span class="dot dot-ani"&gt;&lt;/span&gt;
          &lt;span class="dot dot-ani"&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>component:</p>
  
  <pre><code>import { AuthService } from './../auth.service';
  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent {
  
    constructor(private auth: AuthService) { }
  
    googleLogin() {
      this.auth.googleLogin();
    }
  
  }
  </code></pre>