Angular Anomaly Detection Component, Live Demo

Add anomaly detection to an Angular app with a single standalone component. @datastripes/anomaly/angular analyzes historical data and highlights outliers out of the box, powered by the same anomaly detection 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 DatastripesAnomalyComponent from @datastripes/anomaly/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 { DatastripesAnomalyComponent } from '@datastripes/anomaly/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DatastripesAnomalyComponent],
  template: `
    <datastripes-anomaly-studio
      [data]="rows"
      algorithm="ensemble"
    />
  `
})
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.