Ng-Zorro conflicting with Bootstrap

Question

I've created a search bar that includes a magnifying glass and a clear button ('X' sign).

HTML:

    <div class="search-container">
    <input class="search-Input form-control custome-search-input dark-placeholder" aria-labelledby="search-label" id="search-input"  autofocus="true" placeholder="Search" type="search" >
    <label class="search-icon search-icon-placeholder" for="search-input" id="search-label">
      <svg width="20" height="20" class="search-Search-Icon" viewBox="0 0 20 20">
        <path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </label>
  </div>

CSS:

    .search-container {
    position: relative;
    display: inline-block;
  }

  .search-icon {
    position: absolute;
    top: 50%;
    right: 8px; 
    transform: translateY(-50%);
    cursor: pointer;
}

.search-Input:not(:placeholder-shown) + .search-icon-placeholder {
    display: none;
}

However, when I integrate the code into my Angular project, the magnifying glass appears, but the clear button is missing. I've determined that Ng Zorro, installed in my project, is interfering with the type="search" functionality.

Are there any workarounds to enable the clear button without disabling Ng Zorro completely or resorting to Ng Zorro's search bars? I'm aiming to selectively disable Ng Zorro for this specific input field or force it to display the clear button.

Thank you

Answer 1

We can add the X button by using a template, then we can append the magnifying glass icon below the close button, please find below working example for your reference!

import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-input-allow-clear',
  template: `
    <nz-input-group [nzSuffix]="inputClearTpl">
      <input type="text" nz-input [(ngModel)]="inputValue" placeholder="input with clear icon" />
    </nz-input-group>
    <ng-template #inputClearTpl>
      @if (inputValue) {
        <span
          nz-icon
          class="ant-input-clear-icon"
          nzTheme="fill"
          nzType="close-circle"
          (click)="inputValue = null"
        ></span>
      }
        <svg style="margin-left: 5px;" width="20" height="20" class="search-Search-Icon" viewBox="0 0 20 20">
          <path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
    </ng-template>
  `,
})
export class NzDemoInputAllowClearComponent {
  inputValue: string | null = null;
  textValue: string | null = null;
}

Stackblitz Demo