Skip to main content

RegisterCustomDetailComponent

Registers a CustomDetailComponent to be placed in a given location. This allows you to embed any type of custom Angular component in the entity detail pages of the Admin UI.

Example

Ts
import { Component, OnInit } from '@angular/core';import { switchMap } from 'rxjs';import { FormGroup } from '@angular/forms';import { CustomFieldConfig } from '@vendure/common/lib/generated-types';import {    DataService,    SharedModule,    CustomDetailComponent,    registerCustomDetailComponent,    GetProductWithVariants} from '@vendure/admin-ui/core';@Component({    template: `{{ extraInfo$ | async | json }}`,    standalone: true,    imports: [SharedModule],})export class ProductInfoComponent implements CustomDetailComponent, OnInit {    // These two properties are provided by Vendure and will vary    // depending on the particular detail page you are embedding this    // component into.    entity$: Observable<GetProductWithVariants.Product>    detailForm: FormGroup;    extraInfo$: Observable<any>;    constructor(private cmsDataService: CmsDataService) {}    ngOnInit() {        this.extraInfo$ = this.entity$.pipe(            switchMap(entity => this.cmsDataService.getDataFor(entity.id))        );    }}export default [    registerCustomDetailComponent({        locationId: 'product-detail',        component: ProductInfoComponent,    }),];
Signature
function registerCustomDetailComponent(config: CustomDetailComponentConfig): void

Parameters

config

Was this chapter helpful?
Report Issue
Edited Feb 2, 2026·Edit this page