Topic: AutoCompleter clearButton

NCIIT free asked 3 years ago

Expected behavior

when using (clearBtnClicked)="onClearButtonClick()" Event emitted when clear button is clicked

Actual behavior

Nothing happens when ClearButton clicked - icon type=button actually not represents button Also adding clearButton="false" not removes clearButton

Resources (screenshots, code snippets etc.)


<div class="md-form">
                                        aria-label="Vehicle Manufacturer"
                                        class="completer-input form-control mdb-autocomplete mb-0"
                                        placeholder="Choose your Vehicle Manufacturer"
                                        #autocomplete="mdbAutoCompleter" textNoResults="I have found no results :("
                                    <mdb-option *ngFor="let option of makeAutocompleteResults | async" [value]="option">
                                        {{ option.description }}


onClearButtonClick() {

NCIIT free answered 3 years ago

 <svg _ngcontent-xns-c9="" class="svg-inline--fa fa-times fa-w-11 mdb-autocomplete-clear" type="button" tabindex="0" style="position: absolute; top: 25%; right: 0px; visibility: visible;" aria-hidden="true" data-prefix="fa" data-icon="times" role="img" xmlns="" viewBox="0 0 352 512" data-fa-i2svg="">
<path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
<!-- <button _ngcontent-xns-c9="" class="mdb-autocomplete-clear fa fa-times" type="button" tabindex="0" style="position: absolute; top: 25%; right: 0px; visibility: hidden;"></button> -->

Bartosz Termena staff answered 3 years ago


In my example below, clearBtnClicked works as it should.

<form [formGroup]="testForm">
  <div class="md-form">
      class="completer-input form-control mdb-autocomplete mb-0"
      placeholder="Choose your color"
    <mdb-auto-completer #auto="mdbAutoCompleter" [clearButton]="false" textNoResults="I have found no results :(">
      <mdb-option *ngFor="let option of results | async" [value]="option">
        {{ option }}


  results: Observable<string[]>;
  data: any = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black'];

  testForm: FormGroup;

  constructor() {}

  ngOnInit() {
    this.testForm = new FormGroup({
      testAutocomplete: new FormControl('red'),

    this.results = this.testForm.controls.testAutocomplete.valueChanges.pipe(
      map((value: string) => this.filter(value))

  filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return any) => item.toLowerCase().includes(filterValue));

  onClearButtonClick() {

Also, to hide clearButton try with [clearButton]="false" - we will correct our documentation as soon as possible.

Best Regards, Bartosz.

NCIIT free commented 3 years ago

I have created test with your code and it's working, but it's still fails to generate clearButton code on main project, looking at elements source code I'm getting:

svg icon and commented button code

Bartosz Termena staff commented 3 years ago


What do you mean "fails to generate clearButton" ?


responds for not showing clear button - was that what you meant?

Best, Bartosz.

NCIIT free commented 3 years ago

Hi Bartosz

using 'false' button not displayed and I think I have found what happens when button shows - I'm using FontAwesome Pro SVG with JavaScript, so when button created this script changes it to icon :( Regards, Egle


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



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.3.1
  • Device: Dell XPS
  • Browser: Chrome 77.0.3865.90
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No