[BUG?] Angular 19 - RevoGrid does not display columns nor source

[tkopitsc]

Short Description of the Situation

I’ve installed RevoGrid in the company template to see if it is only broken in the other applications which are already live or it’s a general problem.
My findings were that there is a general problem, but I am not sure why it is acting like it does.

I setup the bare minimum setup from RevoGrid and the table frame is displayed but the columns and source are not.

Setup in the project

Used RevoGrid version: @revolist/angular-datagrid: 4.19.3

I also tried with previous versions e.g. 4.15.8, 4.16.0, 4.17.3 still the same behaviour

home.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RevoGrid } from '@revolist/angular-datagrid';

@Component({
  selector: 'tasks',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  imports: [CommonModule, RevoGrid],
})
export class HomeComponent {
  source = [
    {
      name: '1',
      details: 'Item 1',
    },
    {
      name: '2',
      details: 'Item 2',
    },
  ];
  columns = [
    {
      prop: 'name',
      name: 'First',
    },
    {
      prop: 'details',
      name: 'Second',
    },
  ];
}

home.omponent.html

<revo-grid style="height: 200px; width: 200px" [columns]="columns" [source]="source"></revo-grid>

Inspected behaviour

Application:

Angular DevTools:
Here you can see that the revogrid component has its source and columns set (first is source, second is columns)

On other applications we have a different behaviour of the revogrid table, there the plugins and the readonly which is set on the table are stopping to work. But the table renders as expected.

My assumptions are:

• Either there is a silent error which is not displayed
• A other installed package is making trouble - also no error message

Why this assumptions:

I updated the Demo Application Inventory List, so that it uses angular 20 and revogrid 4.19.3 and it is working fine.

Would be great to receive some support on this topic because it is currently blocking us from releasing features.
I will make some more tests, if you have some suggestions i will be happy.

[jvdyck]

Hi tkopitsc,

I seem to be having the same problem, but using entirely different versions (angular 17.3 and tested with revogrid versions 4.12 up to 4.19). All was working normal until I decided to refactor my app to only be using standalone components and refactor out the old AppModule.

The problem seems to be related with the router-outlet or something like that. If you put the revogrid component directly into a component that was rendered in the router-outlet, this problem occurs. If you put the revogrid component into a subcomponent of a component that was rendered in the router-outlet, then it seems to be working:

In this screenshot I added the same minimal revogrid component twice, with the same settings, same columns and same row data. Difference is that the first one is located in a child component, while the last one is located directly in the component that is active in the router-outlet.

Just a quick question to be sure: is your HomeComponent directly shown by the router-outlet of your application by any chance?
Thanks in advance for your confirmation (or disconfirmation)!

EDIT: By looking at your second screenshot it seems your HomeComponent () is next to your router-outlet... So my question isn't valid anymore. You might still get it working again by using a child component.

[revolist]

👋 @jvdyck @tkopitsc
Thanks for the detailed reports

This behavior is not version-specific and not related to Angular 17/18/19/20 or to a specific RevoGrid release.
It is caused by how Angular initializes components inside RouterOutlet or other async components when using standalone components + custom elements.

Angular creates routed components in a later async phase.
If the <revo-grid> custom element is not yet defined at that exact moment, Angular will:

• bind [columns] and [source] before the element is upgraded
• the bindings are silently ignored (Angular does not re-bind later)
• result: grid shell renders, but columns & data never appear

When the grid is inside a child component, Angular runs additional change detection cycles → the bindings eventually land correctly → it works.

When the grid is directly inside the routed component, there is no re-binding, so the grid stays empty.

This is a known Angular limitation with custom elements, and we are working to improve this flow.

---

✅ Solutions / Workarounds

✔ Option 1 — Delay rendering until the web component is defined

This is the simplest and works reliably.

@Component({
  selector: 'tasks',
  template: `
    <revo-grid
      *ngIf="isReady"
      [columns]="columns"
      [source]="source"
      style="height: 200px; width: 200px"
    ></revo-grid>
  `,
  imports: [CommonModule, RevoGrid],
})
export class HomeComponent implements OnInit {
  isReady = false;

  async ngOnInit() {
    await customElements.whenDefined('revo-grid');
    this.isReady = true;
  }

  // columns, source ...
}

This makes Angular create <revo-grid> after it is registered.

---

✔ Option 2 — Register RevoGrid before Angular bootstraps (recommended long-term)

In main.ts:

import { defineCustomElements } from '@revolist/revogrid/loader';

defineCustomElements(); // register web components globally

bootstrapApplication(AppComponent, appConfig);

With this, the custom element exists before Angular creates any routed component, so you can use:

<revo-grid [columns]="columns" [source]="source"></revo-grid>

everywhere without issues.

---

Why this explains all observed behavior

• Works in Angular 20 demo → because the web components get registered early
• Works in child component → because Angular runs additional change detection
• Plugins / readonly sometimes not applied → same async timing issue
• Silent failure → Angular does not warn when binding to an un-upgraded custom element

We have added description here:
https://rv-grid.com/guide/angular/#Check-out-our-Angular-Data-Grid-examples