Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
35
NullInjectorError: No provider for InjectionToken IgxDropDownBaseToken!
posted

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!

  • 1500
    Offline posted

    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 Tonev
    Associate Software Developer
    Infragistics