Here's what I'm trying to do:
I'm using Angular 12.I'm wrapping all of the ignite components in my custom wrappers with custom @Input() and @Output().
I reached the part where I want to wrap IgxDropDownComponent and IgxDropDownItemComponent into my own wrappers, respectively called <supy-dropdown> and <supy-dropdown-item>.I am then exporting those 2 components in `DropdownModule` then reuse it in my other components.
dropdown.component.ts:
import { IgxDropDownComponent } from 'igniteui-angular'; import { Component, ViewChild } from '@angular/core'; @Component({ selector: 'supy-dropdown', templateUrl: './dropdown.component.html', styleUrls: ['./dropdown.component.scss'], }) export class DropdownComponent { @ViewChild('dropdown') dropdown: IgxDropDownComponent; }
dropdown.component.html:
<igx-drop-down #dropdown><ng-content></ng-content></igx-drop-down>
dropdown-item.component.ts:
import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ selector: 'supy-dropdown-item', templateUrl: './dropdown-item.component.html', styleUrls: ['./dropdown-item.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class DropdownItemComponent {}
dropdown-item.component.html:
<igx-drop-down-item><ng-content></ng-content></igx-drop-down-item>
dropdown.module.ts:
import { IgxDropDownModule, IgxToggleModule } from 'igniteui-angular'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { DropdownComponent } from './dropdown.component'; import { DropdownItemComponent } from './dropdown-item'; @NgModule({ declarations: [DropdownComponent, DropdownItemComponent], imports: [CommonModule, IgxDropDownModule, IgxToggleModule], exports: [DropdownComponent, DropdownItemComponent, IgxDropDownModule, IgxToggleModule], }) export class DropdownModule {}
and finally header.component.html:
<igx-navbar> <div igxNavbarTitle class="header-title">...</div> <div> <supy-dropdown #supyDropdown><supy-dropdown-item>test</supy-dropdown-item></supy-dropdown> </div> </igx-navbar>
This is the error that I am receiving:
Any help would be appreciated!
Tihomir, we currently fixed it like this:
const IGX_DROPDOWN_BASE = (IgxDropDownItemBaseDirective as any).ctorParameters()[0].decorators[0] .args[0] as InjectionToken<string>; @Component({ ........ providers: [ { provide: IGX_DROPDOWN_BASE, useExisting: DropdownComponent, }, ], }) .......
This is really ugly but it works.Hope you will make the token public soon.P.S. the solution you provided won't work because the token will just have different reference.
Hello,
Thank you for the provided project.
Generally when creating providers in appmodule.ts, if the provider there is with the same name as the one that would be provided by a module on another level, the one provided in root will always overwrite the other one.
However, since its very likely that when IgxDropDown comes from npm with all its dependancies, to be still looking at the original injection token, regardless of the one provided in your application.
I am not sure if there is a workaround on this, maybe the best solution will be to have the token public so it can be accessed. So I would advice to post this as a feature request on our GitHub repository here:
https://github.com/IgniteUI/igniteui-angular/issues/new?assignees=&labels=feature-request&template=feature_request.md&title=
You can include the link to this forum post as well.
Please let me know if you have any further questions or concerns.
Sincerely,Tihomir TonevAssociate Software DeveloperInfragistics
For simplicity reasons, I was able to mimic the original error here.
Hello again,
So I was able to implement your solution, but now I am receiving a new error:
Thank you again!
Hello Tihomir,I have tried your solution by creating and providing the token in app.module.ts, and proceeded to inject it in `dropdown.component.ts` constructor but I am still receiving the same error.Should I provide the token in another module? Or inject it in the header component?Also if I have to inject it in the header component, that would mean i'd have to do it in each component that might import my custom dropdown module.Thank you