Custom Detail Components

import { Component, OnInit } from '@angular/core';import { Observable, switchMap } from 'rxjs';import { FormGroup } from '@angular/forms';import { DataService, CustomDetailComponent, SharedModule } from '@vendure/admin-ui/core';import { CmsDataService } from '../../providers/cms-data.service';@Component({    template: `        <vdr-card title="CMS Info">            <pre>{{ extraInfo$ | async | json }}</pre>        </vdr-card>`,    standalone: true,    providers: [CmsDataService],    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. In this case, it will be a "product" entity.    entity$: Observable<any>    detailForm: FormGroup;    extraInfo$: Observable<any>;    constructor(private cmsDataService: CmsDataService) {    }    ngOnInit() {        this.extraInfo$ = this.entity$.pipe(            switchMap(entity => this.cmsDataService.getDataFor(entity.id))        );    }}

import { registerCustomDetailComponent } from '@vendure/admin-ui/core';import { ProductInfoComponent } from './components/product-info/product-info.component';export default [    registerCustomDetailComponent({        locationId: 'product-detail',        component: ProductInfoComponent,    }),];

import { Component, OnInit } from '@angular/core';import { FormGroup } from '@angular/forms';import { CustomDetailComponent } from '@vendure/admin-ui/core';@Component({    template: `<button class="button secondary" (click)="updateDescription()">Update description</button>`,    standalone: true,})export class ProductInfoComponent implements CustomDetailComponent, OnInit {    entity$: Observable<any>    detailForm: FormGroup;        updateDescription() { // [!code highlight]        const descriptionControl = this.detailForm.get('description'); // [!code highlight]        if (descriptionControl) { // [!code highlight]            descriptionControl.setValue('New description'); // [!code highlight]            descriptionControl.markAsDirty(); // [!code highlight]        } // [!code highlight]    } // [!code highlight]}