Is there any way to get data from an other component using output decorator with mouseover event?-CodePudding

I have two component and passing data from on component to another component using output decorator. here I need to get data on mouse over.

here is my child component code

 <projul-filter-pipeline  [getRoute]="routerUrl" (pipeLineMode)="getHeadingString($event)"
        [getLeadsCounts]="leadsLength" (projectType)="getProjectType($event)" (URL)="getURL($event)"
        (showIcon)="iconCondition($event)" (Description)="getDescription($event)" (IconDescription)="getDescriptionIcon($event) ">
    </projul-filter-pipeline>

CodePudding user response：

You should have an EventEmitter with @Output decorator which will emit an event upon mouseover event. Basically it's the same as when you want to emit some data upon user clicking on button.

<div (mouseenter)="foo()"></div>

export class ChildComponent{
        @Output() onm ouseHover = new EventEmitter<any>();
        data: any;

        foo() {
          this.onMouseHover.emit(this.someData)
        }

      }

Good idea would be to put this event on parent div or other container HTML tag that holds your child component template.

It is basic child to parent component communication using @Output and EventEmitter.

CodePudding user response：

put (mousehover) event on the wrapper tag of ChildComponent like this:

<div (childMousehover)="doSome()"> ...</div>

and fire the event up from this function with your data:

 export class ChildComponent{
    @Output() childMouseHover: EventEmitter<any> = new EventEmitter<any>();
    someData;

    doSome() {
      this.childMouseHover.emit(this.someData)
    }

  }`

and in the parent element: <app-child (childMousehover)="onHover($event)"> </app-child> and you get the data from the $event