Hello Manikanta,

I have been looking into your question and to achieve these requirements the first thing you need to do is to create references to each igx-select from the html file in your ts file of the component.

@ViewChild('select1', { static: true }) public igxSelect1: IgxSelectComponent;

After that you will create three objects of type OverlaySettings which you will then pass to each igx-select.

public overlaySettingsSelect1: OverlaySettings;

After loading the page in Angular's ngOnInit lifecycle hook, you will create three objects of the PositionSettings type and, according to your custom logic, you will set the direction, position and starting point of the dropdown that is toggled when the igx-select component is opened.

ngOnInit(): void {
const positionSettings1: PositionSettings = {
            horizontalStartPoint: HorizontalAlignment.Right,
            verticalStartPoint: VerticalAlignment.Top
        };
}

After that, you will set the target of the given igx-select as well as its positionStrategy to each OverlaySettings object, passing the PositionSettings type objects already created above.

this.overlaySettingsSelect1 = {
            target: this.igxSelect1.inputGroup.element.nativeElement,
            positionStrategy: new ConnectedPositioningStrategy(positionSettings1)
};

Finally, you pass the given object to the overlaySettings property of each igx-select in your component.

<igx-select #select1 [overlaySettings]="overlaySettingsSelect1">
      <igx-select-item *ngFor="let item of items" [value]="item">{{ item }}</igx-select-item>
</igx-select>

Thus, you can find a different position for each igx-select or you can find one for all three according to your custom logic.

The described scenario could be observed here:

In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics