Ngx-bootstrap: Angular4 Dropdown Bug - "No provider for TemplateRef"

[dmastag]

When using Dropdown with Angular4, its shows the error "No provider for TemplateRef"

[nemanjan00]

Same problem. Solved it?

[Martin-Wegner]

For Angular 4 you must use 2.0.0-rc.0

[nemanjan00]

Fixed it by adding * in front of dropdownMenu and *dropdownToggle

[crh225]

I couldnt find 2.0.0-rc.0 by using yarn. and adding the * does not help. the error goes away but the dropdown is no longer acting as a dropdown

[nemanjan00]

Version I am using: ng2-bootstrap@^1.3.3

[nemanjan00]

Sorry... 1.6.3 is installed...

[skulptur]

I´m also having the same problem. Just updated to ngx-bootstrap 1.6.3 running Angular 2.3.1. Does it only work on 4 now?

[santoshkt]

Apparently asterik must be prefixed only to dropdownMenu and NOT to dropdown or dropdownToggle.

[mashaalmemon]

@santoshkt this worked for me.

Can anyone explain why the asterisk was necessary to make this work again (after update to ngx-bootstrap and Angular 4)?

[rkusuma]

i get the same issue..
use ngx-bootstrap v1.7.0 and angular 4
@valorkin when to use ng2-bootstrap and when to use ngx-bootstrap?

[valorkin]

@rkusuma Fixed it by adding * in front of dropdownMenu

[valorkin]

@mashaalmemon asteriks gives an option to use dropdownMenu element and content as template
it was required change to add, attach to body option

[rkusuma]

@valorkin still not works for me (ngx-bootstrap 1.7.0).. it works when i use ng2-bootstrap 2.0.0.rc0.

[newerik]

So, from my experiences, this fixed the issue:

• Add asterisk to dropdownMenu like this: *dropdownMenu
• Do not add asterisk to the other markups like dropdown or dropdownToggle
• The _CSS class_ of dropdownMenu has to be dropdown-menu. (In my previous working version it was dropdown-menu-right.) So if the Angular works, but the CSS breaks, then it might be the problem.

[pageii]

Check node_modules/ng2-bootstrap/index.js. The dropdown module, previously referenced as
import { DropdownModule } from './dropdown/dropdown.module';
is likely using a new prefix:
import { BsDropdownModule } from './dropdown/bs-dropdown.module';

That brings us to the necessity of a complete upgrade to ng4+ that comprises 2 parts:

• Part 1 involves the ng-cli upgrade itself. See instructions here.

• Part 2 is simply the upgrade from ng2-bootstrap to ngx-bootstrap(ng4+). Follow these steps:

• npm uninstall ng2-bootstrap --save
• npm install ngx-bootstrap --save
• In your app modules and components, change all ng2 prefixes to ngx.
• Follow @newerik's comments. While the bootstrap documentation shows the asterisk at its demo code, it is easy to miss this step in your upgrade because ng2 did not have the same asterisk.
  <ul *dropdownMenu class="dropdown-menu" role="menu">

Your drop-down should work fine thereafter.

[rahul-krish]

@newerik Thanks.. That solved my issue. But my whole projects font-size shrinked