feat(angular): Add Angular 20 compatibility

packages/dockview-angular/src/lib/dockview-angular.module.ts

@@ -7,15 +7,13 @@ import { PaneviewAngularComponent } from './paneview/paneview-angular.component'
 import { SplitviewAngularComponent } from './splitview/splitview-angular.component';
 
 @NgModule({
-    declarations: [
+    imports: [
+        CommonModule,
         DockviewAngularComponent,
         GridviewAngularComponent,
         PaneviewAngularComponent,
         SplitviewAngularComponent
     ],
-    imports: [
-        CommonModule
-    ],
     exports: [
         DockviewAngularComponent,
         GridviewAngularComponent,

packages/dockview-angular/src/lib/dockview/dockview-angular.component.ts

@@ -41,14 +41,15 @@ export interface DockviewAngularOptions extends DockviewOptions {
 
 @Component({
     selector: 'dv-dockview',
+    standalone: true,
     template: '<div #dockviewContainer class="dockview-container"></div>',
     styles: [`
         :host {
             display: block;
             width: 100%;
             height: 100%;
         }
-        
+
         .dockview-container {
             width: 100%;
             height: 100%;

packages/dockview-angular/src/lib/gridview/gridview-angular.component.ts

@@ -33,14 +33,15 @@ export interface GridviewAngularOptions extends GridviewOptions {
 
 @Component({
     selector: 'dv-gridview',
+    standalone: true,
     template: '<div #gridviewContainer class="gridview-container"></div>',
     styles: [`
         :host {
             display: block;
             width: 100%;
             height: 100%;
         }
-        
+
         .gridview-container {
             width: 100%;
             height: 100%;

packages/dockview-angular/src/lib/paneview/paneview-angular.component.ts

@@ -36,14 +36,15 @@ export interface PaneviewAngularOptions extends PaneviewOptions {
 
 @Component({
     selector: 'dv-paneview',
+    standalone: true,
     template: '<div #paneviewContainer class="paneview-container"></div>',
     styles: [`
         :host {
             display: block;
             width: 100%;
             height: 100%;
         }
-        
+
         .paneview-container {
             width: 100%;
             height: 100%;

packages/dockview-angular/src/lib/splitview/splitview-angular.component.ts

@@ -33,14 +33,15 @@ export interface SplitviewAngularOptions extends SplitviewOptions {
 
 @Component({
     selector: 'dv-splitview',
+    standalone: true,
     template: '<div #splitviewContainer class="splitview-container"></div>',
     styles: [`
         :host {
             display: block;
             width: 100%;
             height: 100%;
         }
-        
+
         .splitview-container {
             width: 100%;
             height: 100%;

packages/dockview-angular/src/lib/utils/angular-renderer.ts

@@ -38,13 +38,19 @@ export class AngularRenderer implements IContentRenderer, IFrameworkPart {
     }
 
     init(parameters: Parameters): void {
-        this.render(parameters);
+        // If already initialized, just update the parameters
+        if (this.componentRef) {
+            this.update(parameters);
+        } else {
+            this.render(parameters);
+        }
     }
 
     update(params: Parameters): void {
         if (this.componentRef) {
             Object.keys(params).forEach(key => {
-                if (this.componentRef!.instance.hasOwnProperty(key)) {
+                // Use 'in' operator instead of hasOwnProperty to support getter/setter properties
+                if (key in this.componentRef!.instance) {
                     this.componentRef!.instance[key] = params[key];
                 }
             });
@@ -62,7 +68,8 @@ export class AngularRenderer implements IContentRenderer, IFrameworkPart {
 
             // Set initial parameters
             Object.keys(parameters).forEach(key => {
-                if (this.componentRef!.instance.hasOwnProperty(key)) {
+                // Use 'in' operator instead of hasOwnProperty to support getter/setter properties
+                if (key in this.componentRef!.instance) {
                     this.componentRef!.instance[key] = parameters[key];
                 }
             });

packages/dockview-angular/src/lib/utils/component-factory.ts

@@ -145,7 +145,8 @@ export class AngularFrameworkComponentFactory {
             injector: this.injector,
             environmentInjector: this.environmentInjector
         });
-
+
+        // Initialize with empty props - dockview-core will call init() again with actual IGroupHeaderProps
         renderer.init({});
         return renderer;
     }