mdb-completer delete (x) button

Topic: mdb-completer delete (x) button

Kapsch pro asked 6 years ago

I would like to add a delete (x) button on the right side of the input field of the mdb-completer component (like provided in the basic example of this component under https://mdbootstrap.com/forms/autocomplete/) Is there a way to do this? Thanks Alex

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear Alex,

Please open pro/autocomplete/components/completer.component.html file, and after input and before label elements, please add below code:
<div>
<pre><button class="mdb-autocomplete-clear">

</svg>

</button></pre>
</div>
Then open completer.component.ts file and change constructor line to code below. But please remember to import Renderer2 and HostListener from @angular/core.
<div>
<pre>constructor(private completerService: CompleterService, private renderer: Renderer2) { }

@HostListener('keyup', ['$event']) onkeyup(event: any) {

if (event.target.value!=='') {

this.renderer.setStyle(event.target.nextElementSibling, 'visibility', 'visible');

} else {

this.renderer.setStyle(event.target.nextElementSibling, 'visibility', 'hidden');

}

@HostListener('click', ['$event']) onclick(event: any) {

if (event.target.classList.contains('mdb-autocomplete-clear')) {

event.target.previousElementSibling.value='';

this.renderer.setStyle(event.target, 'visibility', 'hidden');

}

}</pre>
</div>
And now, it should works fine. If not - let me know.

This solution will be added in next release of MDB Angular Pro.

Best Regards,

Damian

Please insert min. 20 characters.

Dear Alex, Please open pro/autocomplete/components/completer.component.html file, and after input and before label elements, please add below code:

<button class="mdb-autocomplete-clear">

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg">

<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>

<path d="M0 0h24v24H0z" fill="none"/>

</svg>

</button>

Then open completer.component.ts file and change constructor line to code below. But please remember to import Renderer2 and HostListener from @angular/core.

constructor(private completerService: CompleterService, private renderer: Renderer2) { }

@HostListener('keyup', ['$event']) onkeyup(event: any) {

if (event.target.value!=='') {

this.renderer.setStyle(event.target.nextElementSibling, 'visibility', 'visible');

} else {

this.renderer.setStyle(event.target.nextElementSibling, 'visibility', 'hidden');

}

}

@HostListener('click', ['$event']) onclick(event: any) {

if (event.target.classList.contains('mdb-autocomplete-clear')) {

event.target.previousElementSibling.value='';

this.renderer.setStyle(event.target, 'visibility', 'hidden');

}

}

And now, it should works fine. If not - let me know. This solution will be added in next release of MDB Angular Pro. Best Regards, Damian

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Kapsch

Pro User 7Support score
1Questions 1Answers 0Snippets