The component declaration, template variable declarations, and element references do not contain such a member

Question

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.

error:

[Angular] Identifier 'compartmentOpen' is not defined. The component declaration, template variable declarations, and element references do not contain such a member

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.

I've also tried defining it like this: compartmentOpen; in the component, but that doesn't do anything.

template:

<div class="container">
  <div #compartmentOpen
    (mouseover)="compartmentOpen = true"
    (mouseout)="compartmentOpen = false"
    class="inner-container">



    <div class="grid-center">

      <div class="z-bottom"
        *ngIf="compartmentOpen"> Facebook Login coming soon!
        <br>
        <br>
        <br>
        <br>
      </div>


      <button (click)="googleLogin()"
        class="btn btn-primary google-btn-size animated bounce">
        Login with Google
      </button>
      <br>

      <div id="wave">
        <span class="dot dot-ani"></span>
        <span class="dot dot-ani"></span>
        <span class="dot dot-ani"></span>
      </div>
    </div>
  </div>
</div>

component:

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();
  }

}

Answer 1

Actually you problem that you are trying to replace model with primitive boolean value. compartmentOpen in your case is a div element model, containing a lot of stuff. Good news that you can extend your model like this

<div #compartmentOpen
    (mouseover)="compartmentOpen.open = true"
    (mouseout)="compartmentOpen.open = false"
    class="inner-container">

and your *ngIf statement will be

    *ngIf="compartmentOpen.open"

And all will work as you need without errors.

Answer 2

You have to declare you property inside of your component:

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 {
  compartmentOpen = false;
  constructor(private auth: AuthService) { }

  googleLogin() {
    this.auth.googleLogin();
  }
}

Edit: And remove the template reference variable #compartmentOpen which serves no purpose here