I am try to extend an existing working component locally in Angular 2. I don't get any really useful indication of what the problem is, no errors etc.
So I modified an existing plunker (https://plnkr.co/edit/8x34JbEhYdVms4iYLRvM?p=preview) that has an example of ngx-modal working.
(I'm trying to get this technique right so it doesn't matter that it's ngx-modal, it just so happens to be one I found a good plunker on.)
I added an new component that extends the other...
ngx-modal.component.ts
//Extend and wrap NGX MODAL
import { Component } from '@angular/core';
import { ModalModule } from "ngx-modal";
@Component({
selector: 'ext-ngx-modal',
template: `<ng-content></ng-content>`,
})
export class NgxModalComponent extends ModalModule {
constructor() {
super();
}
}
I wrapped the existing modal with
app.ts
<ext-ngx-modal>
<modal #myModal>
<modal-header>
<h1>Modal header</h1>
</modal-header>
<modal-content>
Hello Modal!
</modal-content>
<modal-footer>
<button class="btn btn-primary"(click)="myModal.close()">close</button>
</modal-footer>
</modal>
and registered the component:
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {ModalModule} from "ngx-modal";
import {NgxModalComponent} from "ngx-modal.component"
@Component({
etc...
@NgModule({
imports: [ BrowserModule,ModalModule ],
declarations: [ App, NgxModalComponent ],
exports: [ NgxModalComponent ],
bootstrap: [ App ]
})
After this the plunker wont run...!
Your NgxModalComponent
should import and extent Modal
, not ModalModule
:
export class NgxModalComponent extends Modal {
You forgot to close the <ext-ngx-modal>
tag in your App template
, should be:
</ext-ngx-modal>
I don't know how to properly reference files on imports in plunker, so I moved your components into a single file...
Here is a working PLUNKER