GanttChart Filtering
JavaScriptJavaScriptAngularAngularVueVueReactReact

GanttChart for Angular

Angular standalone version of this topic (compatible with Angular 17+). Import both the Smart UI component and module in the standalone component.

What this topic covers: practical setup, the framework-specific API access pattern, and copy-adapt guidance for the examples in this page.

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { GanttChartComponent, GanttChartModule } from 'smart-webcomponents-angular/ganttchart';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, GanttChartModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  @ViewChild('ganttChart', { read: GanttChartComponent, static: false }) ganttChart!: GanttChartComponent;
}
<!-- app.component.html -->
<smart-gantt-chart #ganttChart></smart-gantt-chart>

Use this.ganttChart for API methods in this topic.

Filtering

Smart.GanttChart component allows filtering of tasks and resources. In order to filter the GanttChart items the user has to use the filter input(s) that are displayed inside the Table header when filtering is enabled. The default filtering mode allows to filter by all columns whilte the advanced filterRow offers more specific filters for each individual column. The following properties are available for filtering:

  • taskFiltering - boolean property. When enabled a filter input is displayed above the Task Table header. Entering text inside the input triggers the tasks filtering. As a result only the tasks that correspond to the filter criteria are displayed.

    Here's how to enable taskFiltering:

    this.ganttChart.taskFiltering = true
  • resourceFiltering - boolean property. When enabled a filter input is displayed above the Resource Table header. Entering text inside the input triggers resource filtering. As a result only the resources that correspond to the filter criteria are displayed.

    Here's how to enable resourceFiltering:

    this.ganttChart.resourceFiltering = true
  • filterRow - boolean property. This property enables advanced filtering for the Task Panel. A filter row is displayed instead of the filter input. The filter row is positioned below the table header and allows to filter the tasks by column. FilterRow is only available for Task filtering.

    Here's how to enable filterRow:

    this.ganttChart.filterRow = true
For AI tooling

Developer Quick Reference

Topic: gantt-filtering   Component: GanttChart   Framework: Angular

Main methods: (none detected)

Common config keys: filtering

Implementation Notes

Compatibility: Angular 17+ (standalone)   API access pattern: @ViewChild(...) + this.component.method()

Lifecycle guidance: Bind inputs declaratively and call imperative API through @ViewChild in/after ngAfterViewInit.

Common pitfalls:

  • Using @ViewChild API too early (before view init).
  • Omitting standalone imports for Smart modules in @Component.imports.
  • Type mismatches between configuration fields and template bindings.

Validation checklist:

  • Ensure module import exists in standalone component imports array.
  • Use typed @ViewChild(..., { read: ComponentType }).
  • Call imperative methods after view initialization.