Ng-bootstrap not executing

Question

I am trying to make such a modal way:

HTML

<div class="btn-holder"> <a (click)="this.open()" class="btn btn-success text-uppercase">Edit My Profile</a> </div> 

Module:

 imports: [BrowserModule, HttpModule, RouterModule.forRoot(appRoutes), NgbModule.forRoot(), EditProfileComponent ], 

component:

 import {Component} from "@angular/core"; @Component({ selector: 'edit-profile', templateUrl: './editProfile.html' }) export class EditProfileComponent{ constructor(){ } submitForm(){ } } 

The problem is that I'm not sure how to make it work, because the document is fuzzy. Advice?

I tried the following:

 @Component({ selector: 'edit-profile', templateUrl: './editProfile.html' }) export class EditProfileComponent{ closeResult: string; constructor(private modalService: NgbModal){ } open(content) { this.modalService.open(content).result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; }); } private getDismissReason(reason: any): string { if (reason === ModalDismissReasons.ESC) { return 'by pressing ESC'; } else if (reason === ModalDismissReasons.BACKDROP_CLICK) { return 'by clicking on a backdrop'; } else { return `with: ${reason}`; } } } 

HTML:

  <a (click)="open(content)" class="btn btn-success text-uppercase">Edit My Profile</a> </div> 

Error in the console when a button is pressed:

 ERROR TypeError: _co.open is not a function at Object.eval [as handleEvent] (ProfileComponent.html:46) at handleEvent (core.es5.js:12047) at callWithDebugContext (core.es5.js:13508) at Object.debugHandleEvent [as handleEvent] (core.es5.js:13096) at dispatchEvent (core.es5.js:8659) at core.es5.js:9270 at HTMLAnchorElement.<anonymous> (platform-browser.es5.js:2668) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424) at Object.onInvokeTask (core.es5.js:3924) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) 

I look at plunker examples, but when I implement them, it seems to crash my application. I added component and dependency to app.module.

Tip

Answer 1

If you are trying to display Modal, you can directly use Bootstrap in Angular. How so

npm install bootstrap --save

In Angular-cli.json

  "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": ["../node_modules/jquery/dist/jquery.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ], 

IN COMPONENT

 import { Component } from '@angular/core'; declare var $ :any; @Component({ 

Learn more about importing a third-party LINK library.

Working mod - LINK .

and if you want to check the source code for a working modal LINK .

Answer 2

Plunker working link: http://plnkr.co/edit/vTY9gG9QcL25Wm9NTBqS?p=preview

1) In your app.module.ts, it looks like you are not declaring EditProfileComponent . Instead of importing, put EditProfileComponent in the declarations. See the following code:

 @NgModule({ imports: [BrowserModule,HttpModule, RouterModule.forRoot(appRoutes), NgbModule.forRoot()], declarations: [App, EditProfileComponent] bootstrap: [App] }) 

2) Your component looks good:

  import {Component} from '@angular/core'; import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'edit-profile', templateUrl: './editProfile.html' }) export class EditProfileComponent { closeResult: string; constructor(private modalService: NgbModal) {} open(content) { this.modalService.open(content).result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; }); } private getDismissReason(reason: any): string { if (reason === ModalDismissReasons.ESC) { return 'by pressing ESC'; } else if (reason === ModalDismissReasons.BACKDROP_CLICK) { return 'by clicking on a backdrop'; } else { return `with: ${reason}`; } } } 

3) In your HTML edit-profile.html, you seem to be missing the ng template that will be displayed to display Modal.

If you notice, we pass the “content” to the function when we click on the “a” tag. This "content" is a local template link in html. We use an instance of this.modalService for "NgbModal" to open a particular modal component in our component.

 <ng-template #content let-c="close" let-d="dismiss"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>One fine body&hellip;</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button> </div> </ng-template> <a (click)="open(content)" class="btn btn-success text-uppercase">Edit My Profile</a>