How can I create an additional placeholder attribute using Angular4?

问题:

I am using Angular Material on a project. Within that project I have a form that is using an autocomplete component. Everything is working well - however, I would like to add placeholder text when the user focuses the input element.

Here is my html template:

<input type="search" matInput placeholder="My Placeholder"      aria-label="My Placeholder"      [matAutocomplete]="mySearch"      [formControl]="myCtrl"      (focus)="onInputFocus()"      [(ngModel)]="myModel"> 

within my .ts file, I have this method:

public onInputFocus(event: Event): void {     // do stuff } 

Angular Material uses the placeholder attribute and turns that into the label element at runtime. I would like the actual placeholder attribute to say something else other than "My Placeholder".

For example, if a user clicks into the input, "My Placeholder" moves up, and the word "Search" shows as the placeholder text.

I have considered using css to set a background image, or create a custom data attribute. Or within the .ts file dynamically create ?? to show placeholder text. Has anyone else run into this issue?

Thank you for any suggestions!

回答1:

You can bind to placeholder like this

<input type="search" matInput [placeholder]="placeholderText"> 

And then in your class,

placeholderText = 'My Placeholder';  updatePlaceholderText() {   this.placeholderText = 'Search'; } 

回答2:

Thank you, @Will Howell - that got me headed down the right path I think. What I ended up doing was adding a new attribute "real-placeholder" & manipulating that.

template.html

<input type="search" real-placeholder="Search" placeholder="My Placeholder" (focus)="onInputFocus($event)" (blur)="onInputBlur($event)"> 

component.ts

/** * Input focus event listener. * @param {Event} event */ public onInputFocus(event: HTMLSelectElement): void {     const placeholder = event.target.getAttribute('real-placeholder');     event.target.setAttribute('placeholder', placeholder); }  /** * Input blur event listener. * @param {Event} event */ public onInputBlur(event: HTMLSelectElement): void {     event.target.setAttribute('placeholder', '');     if (event.target.value !== '') {         event.target.setAttribute('style', 'opacity:1;');     } } 

component.scss

[real-placeholder] {     opacity: 0;     -webkit-transition: opacity 0.4 ease-in-out;     transition: opacity 0.4 ease-in-out;      &:focus {         opacity: 1;     } } 

The above will place the word "Search" in the input area like a traditional html placeholder attribute. I added some nicer css to have the "Search" fade in vs. snap on/off.

Hope this helps someone else!

文章来源: How can I create an additional placeholder attribute using Angular4?