Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 17 additions & 14 deletions projects/igniteui-angular-elements/src/app/custom-strategy.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { ApplicationRef, ChangeDetectorRef, ComponentFactory, ComponentRef, DestroyRef, EventEmitter, Injector, OnChanges, QueryList, Type, ViewContainerRef, reflectComponentType } from '@angular/core';
import { ApplicationRef, ComponentFactory, ComponentRef, DestroyRef, EventEmitter, Injector, QueryList, Type, ViewContainerRef, reflectComponentType } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
Copy link
Preview

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unused imports should be removed. ChangeDetectorRef and OnChanges were removed from the import but other potentially unused imports like DestroyRef, QueryList, and reflectComponentType remain.

Suggested change
import { ApplicationRef, ComponentFactory, ComponentRef, DestroyRef, EventEmitter, Injector, QueryList, Type, ViewContainerRef, reflectComponentType } from '@angular/core';
import { ApplicationRef, ComponentFactory, ComponentRef, EventEmitter, Injector, Type, ViewContainerRef } from '@angular/core';

Copilot uses AI. Check for mistakes.

import { NgElement, NgElementStrategyEvent } from '@angular/elements';
import { fromEvent, Observable } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';
import { ComponentConfig, ContentQueryMeta } from './component-config';

import { ComponentNgElementStrategy, ComponentNgElementStrategyFactory, extractProjectableNodes, isFunction } from './ng-element-strategy';
import { ComponentNgElementStrategy, ComponentNgElementStrategyFactory, extractProjectableNodes } from './ng-element-strategy';
import { TemplateWrapperComponent } from './wrapper/wrapper.component';

export const ComponentRefKey = Symbol('ComponentRef');
Expand Down Expand Up @@ -61,8 +61,13 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
return this._configSelectors;
}

constructor(private _componentFactory: ComponentFactory<any>, private _injector: Injector, private config: ComponentConfig[]) {
super(_componentFactory, _injector);
constructor(
private _componentFactory: ComponentFactory<any>,
private _injector: Injector,
private _inputMap: Map<string, string>,
private config: ComponentConfig[],
) {
super(_componentFactory, _injector, _inputMap);
}

protected override async initializeComponent(element: HTMLElement) {
Expand Down Expand Up @@ -146,9 +151,6 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
);
(this as any).componentRef = this._componentFactory.create(childInjector, projectableNodes, element);
this.setComponentRef((this as any).componentRef);
(this as any).viewChangeDetectorRef = (this as any).componentRef.injector.get(ChangeDetectorRef);

(this as any).implementsOnChanges = isFunction(((this as any).componentRef.instance as OnChanges).ngOnChanges);

//we need a name ref on the WC element to be copied down for the purposes of blazor.
//alternatively we need to be able to hop back out to the WC element on demand.
Expand All @@ -161,7 +163,8 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
this.initializeInputs();
this.initializeOutputs((this as any).componentRef);

this.detectChanges();
// TODO(D.P.): Temporary maintain pre-check for ngAfterViewInit handling on _init flag w/ ngDoCheck interaction of row island
(this as any).componentRef.changeDetectorRef.detectChanges();

if (parentAnchor && parentInjector) {
// attempt to attach the newly created ViewRef to the parents's instead of the App global
Expand All @@ -172,10 +175,10 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
parentAnchor.insert((this as any).componentRef.hostView); //bad, moves in DOM, AND need to be in inner anchor :S
//restore original DOM position
domParent.insertBefore(element, nextSibling);
this.detectChanges();
(this as any).componentRef.hostView.detectChanges();
} else if (!parentAnchor) {
const applicationRef = this._injector.get<ApplicationRef>(ApplicationRef);
applicationRef.attachView((this as any).componentRef.hostView);
(this as any).appRef.attachView((this as any).componentRef.hostView);
(this as any).componentRef.hostView.detectChanges();
}
/**
* End modified copy of super.initializeComponent
Expand Down Expand Up @@ -224,7 +227,7 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
});
}

public override setInputValue(property: string, value: any, transform?: (value: any) => any): void {
public override setInputValue(property: string, value: any): void {
if ((this as any).componentRef === null ||
!(this as any).componentRef.instance) {
(this as any).initialInputValues.set(property, value);
Expand Down Expand Up @@ -271,7 +274,7 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
if (componentConfig.selector === 'igc-pivot-data-selector' && property === 'grid' && value) {
value = value.ngElementStrategy?.componentRef?.instance || value;
}
super.setInputValue(property, value, transform);
super.setInputValue(property, value);
}

public override getInputValue(property: string): any {
Expand Down Expand Up @@ -539,6 +542,6 @@ export class IgxCustomNgElementStrategyFactory extends ComponentNgElementStrateg
}

public override create(injector: Injector) {
return new IgxCustomNgElementStrategy(this.componentFactory, injector, this.config);
return new IgxCustomNgElementStrategy(this.componentFactory, injector, this.inputMap, this.config);
}
}
Loading
Loading