Angular2 - Display Remove/Cancel text for the entered values in the text box and clear the input field on clicking the remove/cancel text

Question

I am learning angular2 and trying to implement a scenario where I have a text box in the page. Whenever I type any value to the text box, I want a cancel/remove text to appear to the right and selecting that should clear the entered value of the text box. In my html-

<md-input #productName name="productName" (keydown)="handleKeyDown($event)" type="text" placeholder="Start typing to select product types"></md-input>

I am not able to figure out how should I add and display the cancel text with cross icon upon typing the text. Can someone let me know how should I tweak my handleKeyDown function to achieve that.

slaesh · Accepted Answer · 2017-01-23 10:12:52Z

2

You have to use *ngIf to show/hide that element and could use ngModel to clear your input.

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <br />

      <input [(ngModel)]="name" />
      <button *ngIf="name" (click)="name = ''">clear</button>
    </div>
  `,
})
export class App {
  name:string;
  constructor() { }
}

live demo: https://plnkr.co/edit/oXl4LEJK3sEc5HxXAaxe?p=preview

edited Jan 23, 2017 at 10:12

answered Jan 23, 2017 at 8:14

slaesh

17k6 gold badges53 silver badges54 bronze badges

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

9 Comments

techie_questie Over a year ago

I tried something like this. but the problem here is that the clear text displays even before entering any values.Its present in the DOM at the very beginning.I want to Clear text to display only when i enter something into text box but that's not happening. Instead I tried using *ngIf="!name.pristine" to display the text but that's not working.Any clue?

slaesh Over a year ago

I can't understand your real problem i guess. would be great if you create a minimal plunker to reproduce it.

techie_questie Over a year ago

In your example, the default value of the textbox is set to 'Angular2'. Whereas in my case, i do not have any default value set but still the cancel text is present in the DOM. I want to display this cancel/clear text only when I enter any value in textbox.Let me know if this is still not clear, I will add plunker.

slaesh Over a year ago

updated the plunker, now there isn't a default value. startingpoint is whithout clear-button?!

techie_questie Over a year ago

Yep. Clear button should not be added into the DOM until we type any value in the textbox.

|

Collectives™ on Stack Overflow

Angular2 - Display Remove/Cancel text for the entered values in the text box and clear the input field on clicking the remove/cancel text

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related