Ng-bootstrap not rendering

Question

I am trying to render a modal like so:

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 issue is I am not sure how to get it working because the doc are vague. Advice?

I have 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 console when I click the button:

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 have look at the plunker examples but when I implement them it seems to break my app. I added the component and dependency to app.module.

Advice?

Answer 1

If you are trying to Display a Modal you can directly use Bootstrap in your Angular . Like 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({

For more info on how to import third party lib LINK

Working Modal - LINK.

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

Answer 2

Working Plunker Link: http://plnkr.co/edit/vTY9gG9QcL25Wm9NTBqS?p=preview

1) In your app.module.ts, Looks like you are not declaring EditProfileComponent. Instead of imports, put EditProfileComponent in declarations. Refer to the code below:

@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 would be referred to display Modal.

If you notice, we pass 'content' in the function when we click on 'a' tag. This 'content' is the local reference to the template in the html. We use the instance 'this.modalService' of 'NgbModal' to open the specific modal 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>