I want to show the popup from bucket-modal.component.ts
when the user mouseover/mouseleave on the list.component.ts
.
How to communicate between list.component.ts
to bucket-modal.component.ts
? My code is here.
list.component.ts
@Component({
selector: 'list',
templateUrl: 'list.component.html',
styleUrls: ['list.component.css'],
})
export class ListComponent implements OnInit {
@Input() state: boolean;
@Output() toggle = new EventEmitter();
onHover() {
this.state = true;
this.toggle.emit(this.state);
console.log("state is ----------" + this.state);
}
onHoverOut() {
this.state = false;
this.toggle.emit(this.state);
console.log("state is------ " + this.state);
}
}
list.component.html
<a (mouseover)="onHover()" (mouseleave)="onHoverOut()">random Link list</a>
listdetails.component.ts
@Component({
selector: 'app-list-detail',
templateUrl: 'app-list.component.html',
styleUrls: ['app-list.component.css'],
})
export class ListDetailComponent implements OnInit {
}
listdetails.component.html
<list [elementslist]="listdetails" listingtype="3"></list>
<list [elementslist]="listdetails" listingtype="3"></list>
<list [elementslist]="listdetails" listingtype="3"></list>
<bucket-modal [(showMeaddBucket)]="show2ClickedBucket" [state]="PopUpshow" (toggle)="PopUpshow=$event"></bucket-modal>
bucket-modal.component.ts
@Component({
selector: 'bucket-modal',
templateUrl: 'bucket-modal.component.html',
styleUrls: ['bucket-modal.component.css'],
})
export class BucketModalComponent implements OnInit {
@Input() state: boolean;
@Output() toggle = new EventEmitter();
onHover() {
this.state = true;
this.toggle.emit(this.state);
console.log("state is " + this.state);
}
onHoverOut() {
this.state = false;
this.toggle.emit(this.state);
console.log("state is " + this.state);
}
}
I think the easiest way is to create a public method in BucketModalComponent
which will show the popup dialog. Something like
export class BucketModalComponent implements OnInit {
showDialog(): void {
// Open the popup dialog
}
}
Then you can call it in listdetails.component.html
:
<list ... (toggle)="modal.showDialog()"></list>
<bucket-modal #modal ... ></bucket-modal>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With