Ng-bootstrap not rendering

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?