react-ng-4.ts

import { CommonModule } from '@angular/common';
import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
import type { ComponentProps } from 'react';

@Component({
  standalone: true,
  imports: [CommonModule, LazyReactComponentDirective],
  template: `
    <h1>Todos page</h1>
    <button (click)="showSelect = true">Show React Component</button>
    <ng-container *ngIf="showSelect">
      <button (click)="changeProps()">Change</button>
      <div [lazyReactComponent]="Select" [props]="selectProps"></div>
    </ng-container>
  `
})
export class TodosPageComponent {
  showSelect = false;
  selectProps: ComponentProps<typeof import('react-select').default> = {
    onChange(v) {
      console.log(v)
    },
    options: [
      { value: 'chocolate', label: 'Chocolate' },
      { value: 'strawberry', label: 'Strawberry' },
      { value: 'vanilla', label: 'Vanilla' }
    ]
  }

  Select = () => import('react-select').then(m => m.default);

  changeProps() {
    this.selectProps = {
      ...this.selectProps,
      options: [{ value: 'change', label: 'Change' }]
    }
  }
}