Angular2, add site-wide element attributes

Question

I am developing an Angular2 app and to make mobile friendly need to disable autocomplete, autocorrect, autocapitalize, and spellcheck for all html inputs. I do not want to have to manually add this for every single input and would like a dynamic site way method to implement.

For example in jQuery we could just do $('input').attr('autocomplete','off')

How can I accomplish the same in Angular2? To grab any inputs sitewide and modify their attributes?

Owain van Brakel · Accepted Answer · 2017-02-20 22:27:28Z

1

You could create an directive for this, Docs

It would look something like this: Untested code that needs to be edited for your project

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

@Directive({
  selector: 'input',
  host: {
    '(change)': 'setAtrributes()',
  }
})
export class InputDirective {
  @Input() mobile: boolean;

  constructor(private elementRef: ElementRef, private renderer: Renderer) {}

  setAtrributes() {
    this.renderer.setElementAttribute(this.elementRef.nativeElement, 'attributename', this.mobile ? 'off' : 'on');
    // Other attributes
  }
}

answered Feb 20, 2017 at 22:27

Owain van Brakel

3,3591 gold badge17 silver badges22 bronze badges

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

1 Comment

Joshua Ohana Over a year ago

perfect thanks, I removed the onchange and just threw them into the constructor though since I want it to always happen... didn't realize you could just tack on additional bits to existing directives via selector: 'input' like that much appreciated :)

Collectives™ on Stack Overflow

Angular2, add site-wide element attributes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related