Seeking help for a simple fix. The objective is to have the element slide out from the top of the page upon hover. The code is functioning correctly, but I am encountering an error.
Error:
[Angular] Identifier 'compartmentOpen' is not defined. The component declaration, template variable declarations, and element references do not contain such a member
I attempted defining it in the template on the element using ngIf like this: #compartmentOpen. This resolved the error but caused the code to malfunction as it attempted to assess the truthiness of the entire element.
I also tried defining it like this: compartmentOpen; in the component with no success.
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();
}
}