delete jquery

Question

How do I get the same effect in typescript/angular without using jquery.

$('#divPublicar').mouseenter(function() {
  this.isOnDiv = true;
});

$('#divPublicar').mouseleave(function() {
  this.isOnDiv = false;
});

Answer 1

You can create a directive, follow example to make the element darker when the mouse is on it:

import { Directive, ElementRef, HostListener, Renderer, Input } from '@angular/core';

@Directive({
    selector: '[apDarkenOnHover]'
})
export class DarkenOnHoverDirective { 

    @Input() brightness = '70%';

    constructor(
        private el: ElementRef,
        private render: Renderer
    ) {}

    @HostListener('mouseover')
    darkenOn() {
        // aqui você vai colocar o comportamento que você desejar quando mouse estiver em cima do elemento
        this.render.setElementStyle(this.el.nativeElement, 'filter', `brightness(${this.brightness})`);
    }

    @HostListener('mouseleave')
    darkenOff() {
        // aqui você vai colocar o comportamento que desejar quando o mouse deixar o elemento
        this.render.setElementStyle(this.el.nativeElement, 'filter', 'brightness(100%)');
    }
}

To add the directive to the element simply add the name given to the directive as if it were a tag attribute:

 <div apDarkenOnHover></div>

Recalling that it is good practice to use directives to improve elements, follow support links:
Angular Style Guide
What are directives and how to use

I hope I’ve helped.

Answer 2

I will leave an example of how it can be done, and there are several ways of doing this and I will show perhaps the easiest, now I advise to study before in Angular and see how it works, how it accesses and manipulates the DOM, pq this is the basic, if you are not able to do this feature with Typescript is pq not yet assimilated the concepts you need to mess with the framework:

HTML

<div (mouseenter)="Enter()" (mouseleave)="Out()"></div>

TS

public isOnDiv: boolean;

Enter() {
   this.isOnDiv = true;
   console.log('ENTROU NA DIV');
}

Out() {
   this.isOnDiv = false;
   console.log('SAIU DA DIV');
}

You can see the working example here