Topic: mdb-completer delete (x) button
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
Dear Alex,
Please open pro/autocomplete/components/completer.component.html file, and after input and before label elements, please add below code:
Then open completer.component.ts file and change constructor line to code below. But please remember to import Renderer2 and HostListener from @angular/core.
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
<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>
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');
}
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No