Integrate in Angular

If you are looking for how to use Angular components as custom components, please refer to here.

Before integrating Univer into an Angular project, read installation and basic usage and familiarize yourself with Angular components and lifecycle hooks.

Integration Steps

Initialize Univer in ngAfterViewInit.
Dispose of Univer in ngOnDestroy.

Example

TypeScript

import type { AfterViewInit, ElementRef, OnDestroy } from '@angular/core'import type { Univer } from '@univerjs/presets'import { Component, ViewChild } from '@angular/core'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreenUS from '@univerjs/preset-sheets-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'@Component({  selector: 'app-univer',  standalone: true,  template: '<div #container style="height: 600px"></div>',})export class UniverComponent implements AfterViewInit, OnDestroy {  @ViewChild('container') container!: ElementRef<HTMLDivElement>  private univer?: Univer  ngAfterViewInit() {    const { univer, univerAPI } = createUniver({      locale: LocaleType.EN_US,      locales: {        [LocaleType.EN_US]: mergeLocales(          UniverPresetSheetsCoreenUS,        ),      },      presets: [        UniverSheetsCorePreset({          container: this.container.nativeElement,        }),      ],    })    this.univer = univer    univerAPI.createWorkbook({})  }  ngOnDestroy() {    this.univer?.dispose()  }}

How is this guide?