How to Un-Select ion-segment Dynamically from ts file?

Ionic Framework Ionic Angular
1

Hello all, I am try to use ion-segment-buttons as a filter, which i click and filter data. But i want to un-select the ion-segment when it is double tap’d to reset my data and make ion-segment ready to take ionChange Event.

I am able to reset but ion-segment-button it is still selected (highlighted), I want to unhighlight it.?

Please help…

Currently i am detecting events like this -

HTML

<ion-segment [(ngModel)]="category" (click)="FilterClick($event)" (ionChange)="FilterChanged($event)">
    <ion-segment-button class="custom-ion-seg-button" value="t1">
        <ion-icon name="car"></ion-icon>
        <ion-label class="filter-label">Filter 1</ion-label>
    </ion-segment-button>
    <ion-segment-button class="custom-ion-seg-button" value="t2">
        <ion-icon name="car"></ion-icon>
        <ion-label class="filter-label">Filter 2</ion-label>
    </ion-segment-button>
</ion-segment>

TS File

FilterClick(ev) {
    this.mouseClick++;
    if (this.mouseClick > 1) {
        console.debug("Reset Filter here and Remove Hightlight from Segment make it default");
    }
}

FilterChanged(ev) {
    console.log(ev)
    this.mouseClick = 0;

    let vehicle: any = ev.detail.value
    // make Filter data Available
    /// ...
}

Thanks,
Rahul

2

You’ve bound [ngModel], so does simply assigning to category achieve your desire?

3

No it don’t work as i am expecting.

Even i tried to create a new button and hide it and then tried to assign its value to category variable. But No success. :frowning:

<ion-segment [(ngModel)]="category" (click)="FilterClick($event)" (ionChange)="FilterChanged($event)">
    <ion-segment-button class="custom-ion-seg-button" style="display: none;" value="hide">
        <ion-icon name="car"></ion-icon>
        <ion-label class="filter-label">Filter 1</ion-label>
    </ion-segment-button>
    <ion-segment-button class="custom-ion-seg-button" value="t1">
        <ion-icon name="car"></ion-icon>
        <ion-label class="filter-label">Filter 1</ion-label>
    </ion-segment-button>
    <ion-segment-button class="custom-ion-seg-button" value="t2">
        <ion-icon name="car"></ion-icon>
        <ion-label class="filter-label">Filter 2</ion-label>
    </ion-segment-button>
</ion-segment>

FilterClick(ev) {
    this.mouseClick++;
    if (this.mouseClick > 1) {
        console.debug("Reset Filter here and Remove Hightlight from Segment make it default");
        this.category = "hide";
    }
}