Greetings everyone, I'm currently attempting to initiate a clickOutside event in my application. When the variable show == true, a div is displayed, but I encounter trouble hiding it again upon clicking anywhere else. Therefore, I decided to implement the clickOutside functionality.
I referenced the following command from this resource: angular2-click-outside
npm i angular2-click-outside
Here is an excerpt from my component:
<div class="row hidden_one" (clickOutside)="close()">
This snippet showcases my HTML structure:
<div class="container-fluid">
<div class="row wrapper">
<div class="col-lg-8 col-md-8 col-sm-9 first">
<input type="text" class="form-control title" placeholder="{{placeholder}}" #task>
</div>
<div class="col-lg-4 col-md-4 col-sm-3 second hiddden">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<input type="text" class="form-control right" value="00:00:00" (click)="showdiv()" [(ngModel)]="timer" #time>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 font">
<i class="fa fa-play-circle fa-3x first" aria-hidden="true" *ngIf="play" (click)="startPause()"></i>
<i class="fa fa-stop-circle fa-3x second" aria-hidden="true" *ngIf="pause" (click)="startPlay(task.value, time.value)"></i>
</div>
</div>
<div class="row hidden_one" (clickOutside)="close()">
<div class="start-end" *ngIf="show" (clickOutside)="hide($event)">
<div class="col-lg-6">
<div class="form-group">
<label for="Start">Start</label><br>
<input type="text" class="form-control" class="startTime" value="{{startTime}}" #val (blur)="validate(val.value)">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="Start">Stop</label><br>
<input type="text" class="form-control" class="startTime" [(ngModel)]="stopTime" [disabled]="pause">
</div>
</div>
</div>
</div>
</div>
Lastly, here's the TypeScript code utilized:
import { Component } from '@angular/core';
import { timeInterface } from './timeInterface';
import { timesList } from './times-list-component';
import { TimeService } from './time-service';
import * as moment from 'moment';
@Component({
selector: 'my-app',
templateUrl: './html/app-component.html',
styleUrls: ['./css/app-component.css']
})
export class AppComponent {
// Code snippets and functions defined within the TypeScript are shown here.
}
Upon console logging, there doesn't seem to be any output suggesting that the event isn't functioning correctly. Any assistance would be greatly appreciated. Thank you in advance.