How to use the igniteui-angular.HorizontalAlignment.Left function in igniteui-angular

To help you get started, we’ve selected a few igniteui-angular examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github IgniteUI / crypto-portfolio-app / src / app / statistics / statistics.component.ts View on Github external
.pipe(map(params => params.get('cryptoName') || route.routeConfig.data.cryptoName)).subscribe(res => this.cryptoName = res);

      this.route
         .paramMap
         .pipe(map(params => params.get('daysCount') || route.routeConfig.data.daysCount)).subscribe(res => this.daysCount = res);
   }

   ngAfterViewInit() {
      this.getData();
      this.getAndTransformData();
      this.chart.overlayTypes.add(FinancialOverlayType.PriceChannel);
   }

   // tslint:disable-next-line: member-ordering
   private _dropdownPositionSettings = {
      horizontalStartPoint: HorizontalAlignment.Left,
      verticalStartPoint: VerticalAlignment.Bottom
   };

   // tslint:disable-next-line: member-ordering
   private _dropDownOverlaySettings = {
      closeOnOutsideClick: true,
      modal: false,
      positionStrategy: new ConnectedPositioningStrategy(this._dropdownPositionSettings),
      scrollStrategy: new CloseScrollStrategy()
   };



   public toggleDropDown(eventArgs, selectedDropDown: IgxDropDownComponent) {
      const dropDown = selectedDropDown;
      this._dropDownOverlaySettings.positionStrategy.settings.target = eventArgs.target;
github IgniteUI / igniteui-angular-samples / src / app / interactions / overlay / overlay-positioning-2 / overlay-position-sample-2.component.ts View on Github external
public showOverlay() {
        if (!this._overlayId) {
            const positionSettings: PositionSettings = {
                target: this.buttonElement.nativeElement,
                horizontalDirection: HorizontalAlignment.Left,
                verticalDirection: VerticalAlignment.Top,
                horizontalStartPoint: HorizontalAlignment.Right,
                verticalStartPoint: VerticalAlignment.Top
            };
            const strategy = new ConnectedPositioningStrategy(positionSettings);

            // Initialize and use overlay settings
            const overlaySettings: OverlaySettings = {
                // Pass in the positioning strategy
                positionStrategy: strategy
            };
            this._overlayId = this.overlayService.attach(MyDynamicCardComponent, overlaySettings);
        }

        this.overlayService.show(this._overlayId);
    }
github IgniteUI / igniteui-angular-samples / src / app / treegrid-finjs / tree-grid-finjs-sample.component.ts View on Github external
},
        {
            aggregate: (parent: any, data: any[]) => {
                return parent.Change / (parent.Price - parent.Change) * 100;
            },
            field: "Change(%)"
        }
    ];
    public primaryKey = "ID";
    public childDataKey = "Children";
    public groupColumnKey = "Categories";

    public items: any[] = [{field: "Export native"}, { field: "Export JS Excel"}];

    public _positionSettings: PositionSettings = {
        horizontalDirection: HorizontalAlignment.Left,
        horizontalStartPoint: HorizontalAlignment.Right,
        verticalStartPoint: VerticalAlignment.Bottom
    };

    public _overlaySettings: OverlaySettings = {
        closeOnOutsideClick: true,
        modal: false,
        positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
        scrollStrategy: new AbsoluteScrollStrategy()
    };

    private subscription;
    private selectedButton;
    private _timer;

    // tslint:disable-next-line:member-ordering
github IgniteUI / igniteui-angular-samples / src / app / grid-crm / grid-crm / grid-crm.component.ts View on Github external
@ViewChild("pinningButton", { static: false }) public pinningButton: ElementRef;

    public localData: any[];
    public dealsSummary = DealsSummary;
    public earliestSummary = EarliestSummary;
    public soonSummary = SoonSummary;

    public cols: QueryList;
    public hiddenColsLength: number;
    public pinnedColsLength: number;

    public searchText: string = "";
    public caseSensitive: boolean = false;

    public _positionSettings: PositionSettings = {
        horizontalDirection: HorizontalAlignment.Left,
        horizontalStartPoint: HorizontalAlignment.Right,
        verticalStartPoint: VerticalAlignment.Bottom
    };

    public _overlaySettings: OverlaySettings = {
        closeOnOutsideClick: true,
        modal: false,
        positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
        scrollStrategy: new CloseScrollStrategy()
    };

    private frmt: Intl.DateTimeFormat;

    constructor(private excelExporterService: IgxExcelExporterService) { }

    public ngOnInit() {
github IgniteUI / warehouse-js-blocks / src / app / addorder / addorder.component.ts View on Github external
translate.setDefaultLang("en");
        const browserLang = translate.getBrowserLang();
        translate.use(browserLang.match(/en|jp/) ? browserLang : "en");
        //translate.use("jp");
    }

    ngOnInit() {
        this.ordersAvailable = this.ordersService.getOrdersAvailable();
    }

    backButtonClicked() {
        this.location.back();
    }

    private _positionSettings = {
        horizontalStartPoint: HorizontalAlignment.Left,
        verticalStartPoint: VerticalAlignment.Bottom
    };

    private _overlaySettings = {
        closeOnOutsideClick: true,
        modal: false,
        positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
        scrollStrategy: new CloseScrollStrategy()
    };

    public toggleDropDown(eventArgs) {
        this._overlaySettings.positionStrategy.settings.target = eventArgs.target;
        this.igxDropDown.toggle(this._overlaySettings);
    }

    get selectOrderButtonCaption(): string {
github IgniteUI / igniteui-angular-samples / src / app / grid / grid-paste / grid-paste-sample.component.ts View on Github external
encapsulation: ViewEncapsulation.None,
    selector: "app-grid-paste-sample",
    styleUrls: ["./grid-paste-sample.component.scss"],
    templateUrl: "./grid-paste-sample.component.html"
})
export class GridPasteSampleComponent {
    @ViewChild("grid1", { read: IgxGridComponent }) public grid1: IgxGridComponent;
    @ViewChild(IgxDropDownComponent) public igxDropDown: IgxDropDownComponent;
    public data;
    public comboData = [
        "Paste data as new records",
        "Paste starting from active cell"
   ];
    public pasteMode = this.comboData[0];
    private _positionSettings = {
        horizontalStartPoint: HorizontalAlignment.Left,
        verticalStartPoint: VerticalAlignment.Bottom
    };
    private _overlaySettings = {
      closeOnOutsideClick: true,
      modal: false,
      positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
      scrollStrategy: new CloseScrollStrategy()
  };

    constructor() {
        this.data = LOCAL_DATA;
    }

    public ngOnInit() {
        this.grid1.verticalScrollContainer.onChunkLoad.pipe().subscribe(() => {
            if (this.grid1.rowList) {
github IgniteUI / igniteui-angular-samples / src / app / data-entries / select / select-sample-4 / select-sample-4.component.ts View on Github external
public ngOnInit(): void {
        const positionSettings: PositionSettings = {
            closeAnimation: scaleOutBottom,
            horizontalDirection: HorizontalAlignment.Right,
            horizontalStartPoint: HorizontalAlignment.Left,
            openAnimation: scaleInTop,
            target: this.igxSelect.inputGroup.element.nativeElement,
            verticalDirection: VerticalAlignment.Bottom,
            verticalStartPoint: VerticalAlignment.Bottom
        };
        this.customOverlaySettings = {
            positionStrategy: new ConnectedPositioningStrategy(
                positionSettings
            ),
            scrollStrategy: new AbsoluteScrollStrategy()
        };
    }
}
github IgniteUI / igniteui-angular-samples / src / app / grid / grid-dynamic-chart-data / grid-dynamic-chart-data.component.ts View on Github external
public toggleChartSelectionDialog(event) {

        if (!this.chartSelectionDialog.isOpen) {
            this._chartSelectionDilogOverlaySettings.outlet = this.outlet;
            const positionStrategy = {
                verticalStartPoint: VerticalAlignment.Bottom,
                target: event.target
            };

            if (((this.grid.visibleColumns.length - 1) - this.colIndex) < 2 || !this.grid.navigation.isColumnFullyVisible(this.colIndex + 1)) {
                positionStrategy["horizontalDirection"] = HorizontalAlignment.Left;
                positionStrategy["horizontalStartPoint"] = HorizontalAlignment.Right;
            } else {
                positionStrategy["horizontalDirection"] = HorizontalAlignment.Center;
                positionStrategy["horizontalStartPoint"] = HorizontalAlignment.Center;
            }
            this._chartSelectionDilogOverlaySettings.positionStrategy = new AutoPositionStrategy({ ...positionStrategy });
            this.chartSelectionDialog.open(this._chartSelectionDilogOverlaySettings);
        } else {
            this.chartSelectionDialog.close();
        }
    }
github IgniteUI / igniteui-angular-samples / src / app / theming / theme-chooser / theme-chooser-sample.component.ts View on Github external
@ViewChild(IgxOverlayOutletDirective)
    public outlet: IgxOverlayOutletDirective;

    @ViewChild("grid1", { read: IgxGridComponent })
    public grid1: IgxGridComponent;

    @ViewChild("datePicker")
    public datePicker: IgxDatePickerComponent;

    @ViewChild("snackbar")
    public snackbar: IgxSnackbarComponent;

    private deletedRow;

    private _dropdownPositionSettings = {
        horizontalStartPoint: HorizontalAlignment.Left,
        verticalStartPoint: VerticalAlignment.Bottom
    };

    private _dropDownOverlaySettings = {
        closeOnOutsideClick: true,
        modal: false,
        positionStrategy: new ConnectedPositioningStrategy(this._dropdownPositionSettings),
        scrollStrategy: new CloseScrollStrategy()
    };

    private _dialogOverlaySettings2 = {
        closeOnOutsideClick: true,
        modal: true,
        outlet: this.outlet,
        scrollStrategy: new CloseScrollStrategy()
    };
github IgniteUI / igniteui-angular-samples / src / app / interactions / toggle / toggle.component.ts View on Github external
ConnectedPositioningStrategy,
    HorizontalAlignment,
    IgxToggleDirective,
    VerticalAlignment
} from "igniteui-angular";

@Component({
  selector: "app-toggle",
  styleUrls: ["./toggle.component.scss"],
  templateUrl: "./toggle.component.html"
})
export class ToggleComponent {
    @ViewChild(IgxToggleDirective) public igxToggle: IgxToggleDirective;
    @ViewChild("button") public igxButton: ElementRef;
    public _positionSettings = {
        horizontalStartPoint: HorizontalAlignment.Left,
        verticalStartPoint: VerticalAlignment.Bottom
    };
    public _overlaySettings = {
        closeOnOutsideClick: false,
        modal: false,
        positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
        scrollStrategy: new CloseScrollStrategy()
    };
    public toggle() {
        this._overlaySettings.positionStrategy.settings.target = this.igxButton.nativeElement;
        this.igxToggle.toggle(this._overlaySettings);
    }
}