DataGridXL with Angular

This user manual provides instructions on how to implement DataGridXL into your project using Angular.

Getting Started

1. Creating Angular App

For up-to-date instalation guide you can read more here.

2. Implementing component into your project

To install the DataGridXL Angular Component, you need to run the following command in your project directory:

bun install
bun ng build @datagridxl/angular
bun ng serve

3. Usage

After installing the package, you can import and use it in your project as follows:

*app.component.ts*

import { Component, ViewChild } from '@angular/core';
import { DgxlComponent } from '@datagridxl/angular';

Here is a simple example how you can display basic grid:

*app.component.html*

<div>
  <DgxlComponent
    #dgxlRef
  ></DgxlComponent>
</div>

*app.component.ts*

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DgxlComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  @ViewChild('dgxlRef') dgxlRef!: DgxlComponent;

  title = 'angular-project';
}

Here ``@ViewChild('dgxlRef') dgxlRef!: DgxlComponent` and `#dgxlRef`` is used to create a reference to the component instance. This allows you to access properties and methods programmatically.

Next Steps

In the next part, you will learn how to pass data to the DataGridXL component.