When utilizing ng2-bootstrap, there is no directive that is defined with the "exportAs" attribute set to "bs-modal"

I found a tutorial that I am trying to emulate from this website

However, when I insert the template into my HTML file 

<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
.........
.......

</div>

I also added the following entry in my app.module.ts file

import { ModalModule } from 'ng2-bootstrap';

@NgModule({
  imports: [ModalModule.forRoot(),...]
})

and then I encountered this error message, but I'm not sure what is missing

EXCEPTION: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "bs-modal" ("
</p-dialog>

<div class="modal fade" bsModal [ERROR ->]#staticModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labell"): PreCheckComponent@80:32
Can't bind to 'config' since it isn't a known property of 'div'. ("
</p-dialog>

Based on the guide, it seems like I shouldn't need to import anything into my component

angularjsangulartypescriptangular2-templateng2-bootstrap

Answer №1

To include the ngx-bootstrap modal module in your Angular module, you should import it as shown in the example below:

import { ModalModule } from "ngx-bootstrap";
@NgModule({
  imports: [
    ModalModule.forRoot()
    ]
})

Answer №2

Ensure you have included the following line in your component code:

@ViewChild('staticModal') public staticModal:ModalDirective;

For additional insights on utilizing ng2-bootstrap modal, check out this informative post, which also includes a demo.

Answer №3

For those of you who find yourselves encountering the same error, even after adding the line to NgModule:

ModalModule.forRoot()

It's important to ensure that your import is correct.

The correct import should be:

import { ModalModule } from 'ngx-bootstrap/modal';

However, avoid using the wrong import:

import { ModalModule } from 'ngx-bootstrap/modal/public_api';

Answer №4

It seems like the ModalDirective is not included in your code.

@ViewChild('modalElement') public modalElement:ModalDirective;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I display and link a base64 string to an Image as a source in Nativescript?

I'm having trouble displaying and binding a base64 image as an ImageSource in my View. The image doesn't show up at all, and I couldn't find any helpful information about it in the documentation. Am I missing something? The imageSource prop ...

androidtypescriptnativescript

Guide on invoking personalized server-side functions (such as object parsing) utilizing Typescript and Angular tools

I've been grappling for weeks to make custom service calls function with Typescript / Angular / C#. It's been a challenge to find a workable solution online, and the more I search, the more bewildered I become. My current approach has largely be ...

angularjsapiservicetypescript

Troubleshooting Vue and Typescript: Understanding why my computed property is not refreshing the view

I'm struggling to understand why my computed property isn't updating the view as expected. The computed property is meant to calculate the total price of my items by combining their individual prices, but it's only showing me the initial pri ...

typescriptvue.jsnuxt.js

utilize switchMap to terminate an HTTP request within an ngrx effect

Behold the ngrx effect in question: @Effect() throwError$: Observable<Action> = this.actions$.pipe( ofType<notificationActions.ErrorThrow>( notificationActions.ActionTypes.ThrowError ), tap(() => { this.store.dispa ...

angularxmlhttprequestrxjsngrx-effects

typescriptIs it possible to disregard the static variable and ensure that it is correctly enforced

I have the following code snippet: export class X { static foo: { bar: number; }; } const bar = X.foo.bar Unfortunately, it appears that TypeScript doesn't properly detect if X.foo could potentially be undefined. Interestingly, TypeScript ...

typescript

Tips for optimizing API requests in an AngularJS application

Experiencing an issue with making too many API requests and looking to reduce them if possible. Here is the scenario I am facing: I have a total of three pages interconnected using ngRoute. The setup is as follows: Page A: Teams (list of teams) URL: "/ ...

angularjsapirequestlimitngresource

Is the RouterModule exclusively necessary for route declarations?

The Angular Material Documentation center's component-category-list imports the RouterModule, yet it does not define any routes or reexport the RouterModule. Is there a necessity for importing the RouterModule in this scenario? ...

javascriptangulartypescriptdependency-injectionangular-material

Set the mat-option as active by marking it with a check symbol

Currently, I am utilizing mat-autocomplete. Whenever a selection is made manually from the dropdown options, the chosen item is displayed with a distinct background color and has a checkmark on the right side. However, when an option in the dropdown is se ...

angulartypescriptangular-materialmat-autocompletemat-option

Displaying Title and Description Dynamically on Markers in Angular Google Maps

I am currently utilizing Angular-google-maps, and here is the HTML code snippet: <ui-gmap-google-map center='mapData.map.center' zoom='mapData.map.zoom' events="mapEvents"> <ui-gmap-markers models="mapData.map.markers ...

javascripthtmlangularjsangular-google-maps

react-hook-form replaces the onChange function causing delays in updating the value

Recently, I created a unique Select component utilizing useState and onChange. I attempted to integrate this custom component with the powerful react-hook-form. Allow me to share the code snippet for the bespoke Select component. const Select = forwardRef ...

reactjstypescriptselectonchangereact-hook-form

Modify the innerHTML to adjust font size when a button is clicked in Ionic 5, or eliminate any unnecessary spaces

I have been experimenting with changing the font size of a variable in .html when the variable contains whitespace. In my .ts page, I use the following code to remove the whitespace: this.contents = this.sanitizer.bypassSecurityTrustHtml(this.product[&apos ...

javascripthtmlcsstypescriptionic-framework

What is the best way to modify directives in response to updates in services?

In my directive (parent-directive), I have a slider called mySlider. When the slider is stopped, it triggers an event that calls an Angular $resource service with two parameters. The service then returns an object. The structure of the directives is as fo ...

javascriptangularjsangular-servicesangular-directive

Facing Problem with Angular PUT Request - "Missing required request body"

I'm encountering a problem with my Angular application when attempting to send a PUT request to the server. The error message I receive reads "Required request body is missing." Below is a snippet of the code that is relevant: Within the Child Compo ...

javascriptangularjsspring-boot

The post request in AngularJS is not successfully transmitting the data to the server

I have been encountering an issue where the model is null when I try to post data to the server. The data being sent is: {"email":"adas","password":"sds","grant_type":"password","client_id":"WebApp"} return $http.post(url, data,{headers: {'Content ...

c#angularjsajaxasp.net-mvcasp.net-web-api

The attempt to create the maq module was unsuccessful

I've hit a roadblock and can't seem to identify what I'm doing incorrectly in this code snippet. //app.js 'use strict'; var app = angular.module('maq', [ 'ui.router', 'maq.home.controller' ]).ru ...

angularjs

execute action once element has finished loading - angular

I am looking for a way to trigger an angular function after a specific element has been displayed on the page. The challenge arises because this element is part of a Single Page Application (SPA) where its display is controlled by a series of events. Tradi ...

javascripthtmlangularjs

How to use sinon to create a mock for an independently imported function

Is there a way to successfully mock the axios import using sinon and then set expectations? Here is my attempted code: import axios from 'axios'; axiosMock = sinon.mock(axios); However, the expectation does not pass: describe('Custom test ...

typescriptmockingsinon

Error in angular2-color-picker module: Unable to retrieve the property 'substr' from an undefined source-node in source-node.js

Error in angular2-color-picker: Issue with 'substr' property, source-node.js This error occurred when I executed: npm i --save angular2-color-picker Any suggestions on how to fix this problem? ...

angularionic-frameworkionic2

Using both withNextIntl and withPlaiceholder simultaneously in a NextJS project causes compatibility issues

I recently upgraded to NextJS 14 and encountered an issue when deploying my project on Vercel. The next.config.mjs file in which I wrapped my nextConfig in two plugins seemed to prevent the build from completing successfully. As a workaround, I decided t ...

javascriptnode.jstypescriptnext.jsnext-intl

What steps can I take to resolve the Angular JS error message: [$injector:unpr]?

index.html <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Angular JS</title> <script src="lib/angular.min.js"></script> ...

javascriptangularjs