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!