ng-select how to pass the (click)="clear(item)" from child to parent in custom component

Question

I have a component that uses the ng-select that looks liek this

html

<ng-select
appDropdownResizer
[items]="values"
[multiple]="true"
bindLabel="label"
bindValue="value"
(change)="onChange($event)"
(clear)="onClear()"
[class]="cssClass"
[ngModel]="selectedValue">
<!-- Label Template -->
<ng-template *ngIf="labelTemplate" ng-label-tmp let-item="item">
    <ng-container *ngTemplateOutlet="labelTemplate; context: { $implicit: item }"></ng-container>
</ng-template>

<!-- Option Template -->
<ng-template *ngIf="optionTemplate" ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
    <ng-container *ngTemplateOutlet="optionTemplate; context: { $implicit: item }"></ng-container>
</ng-template>

<!-- Default Label Template -->
<ng-template *ngIf="!labelTemplate" ng-label-tmp let-item="item" let-clear="clear">
    <!-- Default label template logic goes here -->
    <span class="ng-value-icon left" (click)="clear(item)" aria-hidden="true">×</span><span>{{ item.label }}</span>
</ng-template>

<!-- Default Option Template -->
<ng-template *ngIf="!optionTemplate" ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
    <!-- Default option template logic goes here -->
    <span>{{ item.label }}</span>
</ng-template>

ts

  import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
    import { NgSelectComponent } from '@ng-select/ng-select';
    import { SelectItem } from 'src/framework/interfaces/select-item.interface';
    import { FilterType } from '../filter-type.enum';
    import { IFilterValue } from '../filter-value.interface';
    
    @Component({
        selector: 'fw-multi-select-filter',
        templateUrl: './multi-select-filter.component.html',
        styleUrls: ['./multi-select-filter.component.scss']
    })
    export class MultiSelectFilterComponent implements OnInit {
        @ViewChild(NgSelectComponent) ngSelectComponent: NgSelectComponent;
        @ContentChild('labelTemplate', { static: false }) labelTemplate: TemplateRef<any>;
        @ContentChild('optionTemplate', { static: false }) optionTemplate: TemplateRef<any>;
        @Input() values: SelectItem[] = [];
        @Input() field = '';
        @Output() filterChanged = new EventEmitter<IFilterValue>();
        @Input() cssClass = 'tw-w-36 tw-min-w-full';
        @Input() selectedValue: [];
    
        private filterType = FilterType.Equals;
        selectedItem: SelectItem;
    
        constructor() {}
    
        ngOnInit(): void {}
    
        onChange(items: SelectItem[]) {
            if (items.length == 0) {
                this.onClear();
            } else {
                this.filterChanged.emit({
                    field: this.field,
                    values: [...items.map(i => i.value)],
                    type: this.filterType
                });
            }
        }
    
        onClear() {
            this.filterChanged.emit({
                field: this.field,
                values: [],
                type: this.filterType
            });
        }
    
        triggerClearance() {
            this.ngSelectComponent.handleClearClick();
        }
    }

I call the custom component like this

<fw-multi-select-filter
                    [values]="languageItems"
                    [field]="'languageCode'"
                    [selectedValue]="usersService.getMultiFilterValues('languageCode')"
                    (filterChanged)="onFilterChanged($event)"
                    (filterCleared)="onFilterCleared($event)">
                    <ng-template #optionTemplate let-item>
                        <i class="flag-icon flag-icon-{{ item.value == 'en' ? 'gb' : item.value }} flag-icon-squared tw-mr-2"></i>
                        <span>{{ item.label }}</span>
                    </ng-template>
                    <ng-template #labelTemplate let-item let-clear>
                        <span class="ng-value-icon left" (click)="clear(item)" aria-hidden="true">×</span>

                        <span>
                            <i class="flag-icon flag-icon-{{ item.value == 'en' ? 'gb' : item.value }} flag-icon-squared tw-mr-2"></i>
                        </span>
                    </ng-template>
                </fw-multi-select-filter>

Now for the issue/question

The click="clear(item)" how do i pass this from the custom custom label template to the component in the correct way. As of now the clear work in the default template in the multiselect filter component html but it does not pass over from the label template in my custom component call

Answer 1

You can't do that but you can emit event from child component and listen it in parent component

You can add this in child component

@Output() onClear = new EventEmitter<any>();

In method in which you want to clear you can call this

this.onClear.emit(item)

In parent component you can listen it and clear it on parent component

<child-component (onClear)="onClear($event)"></child-component>