CODEWITHSUNDEEP
htmlangularangular2-directives
Questieme
Questieme

Reputation: 993

Directive to change the string inside of a paragraph to uppercase is not working

I am trying to write a directive that turns the content of a paragraph to uppercase when you hover your mouse over it. I am not getting any errors whatsoever - it just does not work. I have written a similar code before that highlights the text to a certain color, which worked. Why wouldn't it also work when changing the text to uppercase?

filter.component.html

<p appToUpperCase>String to uppercase</p>

to-upper-case.directive.ts

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

@Directive({
selector: '[appToUpperCase]'
})

export class ToUpperCaseDirective {

  constructor(public el: ElementRef) {

  }

  @HostListener('mouseenter2') onMouseEnter() {
     this.el.nativeElement.value = this.el.nativeElement.value.toUpperCase();
  }
}

EDIT: As @Ilya Rachinsky suggested, I have changed the event name from mouseenter2 to mouseenter and it still does not work.

Upvotes: 0

Views: 547

Answers (2)

Rob L.
Rob L.

Reputation: 69

Your directive structure looks fine. I guess you forgot to include it into the list of declarations on the module, so the directive will be available for the templates. Additionally, there is no 'value' property on 'p' element, you need to use innerHTML as previously suggested.

Checkout my example: https://stackblitz.com/edit/angular-ivy-uppercase-directive?file=src%2Fapp%2Fto-upper-case.directive.ts

Upvotes: 1

Ilya Rachinsky
Ilya Rachinsky

Reputation: 31

You have to use correct event name - mouseenter instead mouseenter2

Upvotes: 1

Related Questions