Angular v21 - Wijmo search component within component not updating Flexgrid?

Angular v21 - Wijmo search component within component not updating Flexgrid?

Posted by: oanderson on 20 July 2026, 9:51 am EST

• 

  oanderson

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 July 2026, 9:51 am EST

  Hello, all,

  We’re having trouble with an Angular-component-encapsulated Wijmo search component updating an associated Wijmo Flexgrid component.

  Here’s what we’re seeing. If we put the search component inside of a custom wrapper Angular component, changing the input of the search component doesn’t update the associated FlexGrid component. (The FlexGrid is known to the encapsulated Wijmo search component because the grid was passed into the wrapper component as an input.) But if we have the Wijmo search component adjacent to the FlexGrid in the same component, everything works fine. Are we missing something?

  Here’s a StackBlitz Angular v21 project that demonstrates the issue we’re having: https://stackblitz.com/edit/stackblitz-starters-dmducgie?file=src%2Fsearch-wrapper.component.ts

  So the architecture is like this:

  • Parent component: Contains a FlexGrid component, and a child search-wrapper component. The FlexGrid object is passed into the search-wrapper component via Angular input.
  • Search-wrapper component: A child of the Parent component, which takes the FlexGrid in the parent as an input. The FlexGrid input value is assigned to the grid input of the wj-flex-grid-search component inside of this child component.

  Are there limitations in Angular v21 and Wijmo that prevent us from wrapping a Wijmo search in a component? We’ve had success with this architecture in Angular v19; it broke after we upgraded the project to Angular v21.

  Any help or advice much appreciated. Thanks!

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 21 July 2026, 5:19 am EST

  Hi,
  
  Thank you for sharing the sample. On investigating the sample, we found that the issue is related to the use of Angular Signals introduced in newer Angular versions.
  
  In Angular 19, the wrapper component most likely used the traditional @Input() decorator, where the flex property contained a direct reference to the FlexGrid instance. As a result, passing it to the wj-flex-grid-search component worked as expected:

  @Input()
  flex!: FlexGrid;

  <wj-flex-grid-search [grid]="flex"></wj-flex-grid-search>

  After upgrading to Angular 21, the wrapper component uses the new input() API:

  readonly flex = input<wjcGrid.FlexGrid | undefined>();

  With this change, flex is no longer a FlexGrid instance. Instead, it is an Angular Signal whose value is the FlexGrid.
  
  When you bind it as:

  <wj-flex-grid-search [grid]="flex"></wj-flex-grid-search>

  the wj-flex-grid-search component receives the Signal object instead of the actual FlexGrid instance. Since the Wijmo grid property expects a FlexGrid object and does not automatically unwrap Angular Signals, the search component is unable to associate itself with the grid, which is why typing in the search box does not update the FlexGrid.
  
  To resolve this, you should unwrap the Signal before passing it to the grid property by invoking it with parentheses:

  <wj-flex-grid-search
      [placeholder]="'FlexGridSearch'"
      [grid]="flex()"
      [exactMatch]="exactMatch">
  </wj-flex-grid-search>

  Calling flex() returns the underlying FlexGrid instance stored by the Signal, allowing the wj-flex-grid-search component to initialize correctly and update the associated FlexGrid as expected.
  
  This is the primary difference between the Angular 19 and Angular 21 implementations. In Angular 19, the wrapper passed the FlexGrid instance directly, whereas in Angular 21 the wrapper passes a Signal unless it is explicitly unwrapped.
  
  Reference for this update → https://angular.dev/guide/components/inputs#reading-inputs
  
  Here it is written that the input function returns an InputSignal. You can read the value by calling the signal. So please try updating the binding to use flex(). This should restore the expected search functionality.
  
  If you continue to experience the issue after making this change, please let us know, and we’ll be happy to investigate further.
  
  Here is the updated sample → https://stackblitz.com/edit/stackblitz-starters-xnppfyd9?file=src%2Fsearch-wrapper.component.html
  
  Regards.

• 

  oanderson

  • Post Options:
  • Link
    Copy

  Posted 22 July 2026, 2:54 pm EST

  Thanks much! I am slightly embarrassed to admit it, but passing the signal itself instead of the signal value into the FlexGrid input was a typo in the demo. Oops.

  But the explanation and information is still much appreciated. Using the fixed demo, we are able to see Wijmo components and Angular v21 clearly have no issues (not surprisingly), so that gives us a firm platform to investigate our own custom code. Thanks again!