I have created a sample trying to reproduce the described behavior. I am using 11.0.7 version of Ignite UI for Angular package and 11 version of Angular. On my side everything works as expected and the custom filters are appeared in the filtering drop-down.

In order to be able to assist you further I will need some additional information regarding your scenario. Could you please try to modify the sample I have been attached, so that it replicates the issues you are facing and send it back to me? Alternatively, if the behavior cannot be replicated, please feel free to provide your own isolated sample, where the issue is reproducible. Please keep in mind to remove any dependencies and code that is not directly related to the issue.

Having a sample, which I can debug on my side, will be highly appreciated and extremely helpful for providing you with solution as soon as possible.

Thank you for your cooperation.

Looking forward to hearing from you.

Regards,
Viktor Kombov
Entry Level Software Developer
Infragistics, Inc.

Hello ,

Thank you for posting in our community.

You can customize the filtering menu by adding, removing or modifying the filtering operands. By default, the filtering menu contains certain operands based on the column’s data type (IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand and IgxStringFilteringOperand). You can extend these classes or their base class IgxFilteringOperand to change the filtering menu items’ behavior as in the following example:

HTML

<igx-column field="OrderDate" header="Order Date" [dataType]="'date'" [filters]="dateFilteringOperand"> 
</igx-column>

TYPESCRIPT

export class MyComponent implements OnInit {
    ...
    public dateFilteringOperand = DateTimeFilteringOperand.instance();
    ...
}

export class DateTimeFilteringOperand extends IgxDateFilteringOperand {
    protected constructor() {
        super();

        const thisWeek = {
            name: 'This Week',
            isUnary: true,
            iconName: 'this-week',
            logic: (target: Date) => {
                if (!target) {
                    return false;
                }
                this.validateInputData(target);

                const targetDate = IgxDateFilteringOperand.getDateParts(target, 'yMd');
                const now = IgxDateFilteringOperand.getDateParts(new Date(), 'yMd');

                const today = new Date();
                const diff = 7 - today.getDay();
                const endOfWeek = today.getDate() + diff;
                const beginningOfWeek = endOfWeek - 6;

                return targetDate.year === now.year &&
                    targetDate.month === now.month &&
                    targetDate.day >= beginningOfWeek &&
                    targetDate.day <= endOfWeek
            }
        }

        let index = this.operations.indexOf(this.condition('yesterday'));
        this.operations.splice(index, 0, thisWeek);
    }
}

More about IgxGrid's Custom Filtering Operands you can find here.

Additionally, I have created a small sample illustrating my suggestion, which you can find here. Please test it on your side and let me know whether you find it helpful.

Regards,
Viktor Kombov
Entry Level Software Developer
Infragistics, Inc.