How to use igniteui-angular - 10 common examples

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
    constructor(private zone: NgZone, private localService: LocalDataService, private elRef: ElementRef) {
        this.subscription = this.localService.getData(this.volume);
        this.localService.records.subscribe((d) => this.data = d);
    }
    // tslint:disable-next-line:member-ordering
    public ngOnInit() {
        if (this.theme) {
            document.body.classList.add("fin-dark-theme");

.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;

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
    constructor(private zone: NgZone, private localService: LocalDataService, private elRef: ElementRef) {
        this.subscription = this.localService.getData(this.volume);
        this.localService.records.subscribe((d) => this.data = d);
    }
    // tslint:disable-next-line:member-ordering
    public ngOnInit() {
        if (this.theme) {
            document.body.classList.add("fin-dark-theme");
        }

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;
    private volumeChanged;

    // tslint:disable-next-line: max-line-length
    constructor(private zone: NgZone, private localService: LocalDataService, private elRef: ElementRef, private cdr: ChangeDetectorRef) {
        this.subscription = this.localService.getData(this.volume);
        this.localService.records.subscribe(x => { this.data = x; });
    }

    public ngOnInit() {
        this.grid1.sortingExpressions = [{ fieldName: this.groupColumnKey, dir: SortingDirection.Desc }];
        this.volumeChanged = this.volumeSlider.onValueChange.pipe(debounce(() => timer(200)));

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;
      dropDown.toggle(this._dropDownOverlaySettings);
   }

   public getData(event?: any) {
      let coin: any;

      if (event) {
         const name = event.item.elementRef.nativeElement.innerText;

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
    constructor(private zone: NgZone, private localService: LocalDataService, private elRef: ElementRef) {
        this.subscription = this.localService.getData(this.volume);

}

        // restore paging
        if (this.paging && this.gridState.paging) {
          if (this.grid.perPage !== this.gridState.paging.recordsPerPage) {
            this.grid.perPage = this.gridState.paging.recordsPerPage;
            this.grid.cdr.detectChanges();
          }
          if (this.grid.page !== this.gridState.paging.index) {
            this.grid.paginate(this.gridState.paging.index);
          }
        }

        // restore sorting
        if (this.sorting && this.gridState.sorting) {
          const strategy = DefaultSortingStrategy.instance();
          this.gridState.sorting.forEach((expr) => expr.strategy = strategy);
          this.grid.sortingExpressions = this.gridState.sorting;
        }

        // restore selection
        if (this.selection && this.gridState.selection) {
          this.grid.selectRows(this.gridState.selection);
        }
    }

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);
    }

},
        {
            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

this.snack.show();
   }

   public updateRow(evt) {
      const rowItem = evt.rowID;
      rowItem.holdings = evt.newValue;

      this.updateItem(rowItem);
   }

// tslint:disable-next-line: member-ordering
   private _dialogOverlaySettings = {
      closeOnOutsideClick: true,
      modal: true,
      outlet: this.outlet,
      scrollStrategy: new CloseScrollStrategy()
   };


   private positive24h = (rowData: any): boolean => {
      return rowData.changePct24Hour > 0;
   }
   private negative24h = (rowData: any): boolean => {
      return rowData.changePct24Hour < 0;
   }

   // tslint:disable-next-line:member-ordering
   public dailyChanges = {
      positive: this.positive24h,
      negative: this.negative24h
   };