Cannot configure ng-bootstrap

Question

I cannot figure out how to use ng-boostrap. I found several examples that show how to use the alert directive. I get various errors.

In my AppModule I have:

import { NgbAlertModule } from 'ng-bootstrap';

...

imports: [ NgbAlertModule, ... ]

I have a component whose HTML contains:

<alert type="success">Alert works!</alert>

I get the following error:

Template parse errors: 'alert' is not a known element

Before the above I tried to import Alert or AlertModule (as most examples suggested), but always got an error that said no such exported member existed. The only way I could get my import to work is by specifying NgbAlertModule.

I am very confused. First, I do not understand why it appears that all examples wish to put the import in AppModule. Is this just to make the example simple? It makes more sense to me to put it in the component that needs it. Can that be done? If so, then how? Is it best practice?

I do not understand what import is looking for. I understand it is looking for a module, but where? Most of the examples I found say to import AlertModule or Alert. What is the difference? I could not get either of these to work, but found that I could successfuly import NgbAlertModule, though but it didn't seem to contain .

Any help is appreciated.

Did you really read the docs?? It's <ngb-alert ...>

developer033
– developer033

2017-02-14 23:52:28 +00:00
Commented Feb 14, 2017 at 23:52 — developer033
– developer033, Commented Feb 14, 2017 at 23:52

Michel · Accepted Answer · 2017-02-15 00:30:44Z

2

First thing you need to do is to use the correct selector for the Alert component, which is not alert but ngb-alert:

some.component.ts

<ngb-alert type="success">Alert works!</ngb-alert>

Regarding the imports, I would advise going through the Getting started guide.

Basically, the import line would be as follow:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

Then, depending on if you import it in your root module (most likely AppModule) or in another module, the import declaration will slightly vary. In the root module it should be NgbModule.forRoot(), while in others it will be just NgbModule.

Note that NgbModule is the main module, containing all the other ones (NgbAlertModule, NgbModalModule, ...). You could do the above with NgbAlertModule, if you don't have any use of the other modules.

edited Feb 15, 2017 at 0:30

answered Feb 14, 2017 at 23:57

Michel

28.5k6 gold badges67 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dkalkwarf Over a year ago

Changing to ngb-alert gave me an error about missing NgbAlertConfig, which I fixed. Now it works. However, I am still a bit confused. All of the examples I found used alert, not ngb-alert. Also, all of the examples imported either AlertModule or Alert, not NgbAlertModule. I do not understand the difference. I only used NgbAlertModule while mimicking other code in hopes that something would work.

Collectives™ on Stack Overflow

Cannot configure ng-bootstrap

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related