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!
Hello,
Thank you for posting on our forums.
You will need to add an InjectionToken just as the error says. First you will need to create the token, as I believe it is not exposed to be directly imported:
export const IGX_DROPDOWN_BASE = new InjectionToken<IDropDownBase>('IgxDropDownBaseToken');
then you will need to register it to the providers list:
providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxDropDownComponent }]
and inject it in the constructor of your component:
@Inject(IGX_DROPDOWN_BASE) protected dropDown: IDropDownBase.
I believe should get the error fixed and keep you going.
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