Angular Forecasting Component, Live Demo

Add forecasting to an Angular app with a single standalone component. @datastripes/forecast/angular renders historical data, a forecast horizon, and confidence bands out of the box, powered by the same Forecasting Widget engine used by the React, Vue, and vanilla JS builds of Datastripes.

Angular 18 standalone components can be bootstrapped into an isolated ApplicationRef with createApplication() and attached to any DOM node with createComponent(), no bootstrapApplication takeover of the whole page required. That's exactly what this section does: it mounts the real, pre-compiled DatastripesForecastComponent from @datastripes/forecast/angular (the same dist/ ng-packagr build a consumer installs from npm) into a div on this page, with change detection driven by ApplicationRef.tick().

Source

import { Component } from '@angular/core';
import { DatastripesForecastComponent } from '@datastripes/forecast/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DatastripesForecastComponent],
  template: `
    <datastripes-forecast-studio
      [data]="rows"
      [horizon]="14"
      algorithm="prophet_lite"
    />
  `
})
export class AppComponent {
  rows = [
    { date: '2024-01-01', value: 102 },
    { date: '2024-01-02', value: 108 }
  ];
}

In a real Angular CLI application you'd bootstrap this with bootstrapApplication(AppComponent) as usual, the createApplication() + createComponent() pairing above is only needed here because this demo has to share the page with VitePress's own Vue-rendered shell instead of owning the whole document.