Read/get element attribute from within custom directive in Angular 2+

Question

I'm building a custom directive where I want to read one of the attributes (formControlName) of the native element, and then conditionally add one or more attributes to the element.

However, when I console.log the native element's attribute, I get:

undefined

Here's what I tried:

@Directive({
  selector: '[appInputMod]'
})
export class InputModDirective implements OnInit {

  constructor(public renderer: Renderer2, public hostElement: ElementRef) { }

  @Input()
  appInputMod() { }

  ngOnInit() {

    console.log(this.hostElement.nativeElement.formcontrolname);

    const el = this.hostElement.nativeElement;
    if (el.formcontrolname === 'firstName')
    {
        this.renderer.setAttribute(this.hostElement.nativeElement, 'maxlength', '35');
    }
  }
}

How can I read this attribute name from within the directive?

Is the formControlName attribute present on the tag when you inspect it in your Browser ? By the way, maybe you should use the correct way to get the attribute. — user4676340
– user4676340, Commented Mar 20, 2018 at 17:31
It is. Yeah, I think that's was what I asking. See my answer. — BBaysinger
– BBaysinger, Commented Mar 20, 2018 at 17:43

Robin De Schepper · Accepted Answer · 2022-08-30 07:42:31Z

5

What you're doing doesn't seem very Angular, you normally don't want to start relying on DOM manipulation. The more Angular approach would be to read the attribute on the element of your directive as an @Input(), and provide your results as an @Output():

@Directive({
  selector: '[appInputMod]'
})
export class InputModDirective implements OnInit {
  @Input() formcontrolname: string;
  @Output() somethingHappened: EventEmitter<any> = new EventEmitter<any>();

  ngOnInit() {
    if (formcontrolname === 'firstName') {
      this.somethingHappened.emit({maxlength: 35});
    }
  }

And then in your template:

<some-element appInputMod formcontrolname="myName" (somethingHappened)="doSomething($event)">
</some-element>

edited Aug 30, 2022 at 7:42

answered May 18, 2019 at 9:45

Robin De Schepper

6,5245 gold badges44 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BBaysinger · Accepted Answer · 2021-01-22 17:19:54Z

0

A hack, but a possibly useful side note:

This works from ngOnInit:

this.hostElement.nativeElement.getAttribute('formcontrolname');

edited Jan 22, 2021 at 17:19

answered Mar 20, 2018 at 17:27

BBaysinger

6,92714 gold badges78 silver badges149 bronze badges

Collectives™ on Stack Overflow

Read/get element attribute from within custom directive in Angular 2+

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related