1

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...!

My extended Plunker-not working

MagicLuckyCat
  • 324
  • 2
  • 5
  • 19

1 Answers1

1

1. Modal / ModalModule

Your NgxModalComponent should import and extent Modal, not ModalModule:

export class NgxModalComponent extends Modal {

2. Template syntax error

You forgot to close the <ext-ngx-modal> tag in your App template, should be: </ext-ngx-modal>

3. Plunker

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

Fredrik Lundin
  • 8,006
  • 1
  • 29
  • 35
  • Yes, I had cut + pasted the ModalModule and needed to use the "Modal". Nice one I'd gone code blind! – MagicLuckyCat Jun 22 '17 at 13:30
  • For a bonus point can anyone workout why the property isOpened is not changing in the example here...https://plnkr.co/edit/rTJsMq7XHg4zLmIjUARD?p=preview – MagicLuckyCat Jun 22 '17 at 13:42
  • @PaulThomas probably because you are opening an instance of `modal` (`(click)="myModal.open()"`), not `ext-ngx-modal`. So your `ext-ngx-modal` is indeed nere opened (and will always say `false`). – Fredrik Lundin Jun 22 '17 at 14:07
  • Yeah when I put the handler on my ext-modal it throws errors. I've created a separate case for for that now. https://stackoverflow.com/questions/44704437/ngx-modal-when-extended-nativeelement-of-undefined-angular-2 – MagicLuckyCat Jun 22 '17 at 16:04