Angular 2 Modal Directive Error with exportAs

Topic: Angular 2 Modal Directive Error with exportAs

Orestes Garcia asked 7 years ago

I\\\'m trying to reproduce in my project one of your modal examples, but I\\\'m getting this error:Uncaught Error: Template parse errors:There is no directive with \\\"exportAs\\\" set to \\\"bs-modal\\\" (\\\"ick)=\\\"show( \\\'@getbootstrap\\\' )\\\" ripple-radius>Open modal for @getbootstrap</button>

This is my component:

import { Component, ViewChild } from \\\'@angular/core\\\';

import { ModalDirective} from '../../mdb/free/modals';
@Component({ selector: \\\'modal-content-example\\\',
templateUrl: \\\'modal-content.html\\\',})
export class ModalContentComponent { @ViewChild(\\\'content\\\') public contentModal;
public name: string;
show(value:string){
this.name = value;
this.contentModal.show();
}}

This is my html:

<buttontype="button"class="btn btn-primary waves-light"data-toggle="modal"data-target="#exampleModal"data-whatever="@mdo" (click)="show( '@mdo' )"ripple-radius>Open modal for @mdo</button>

<buttontype="button"class="btn btn-primary waves-light"data-toggle="modal"data-target="#exampleModal"data-whatever="@fat" (click)="show( '@fat' )"ripple-radius>Open modal for @fat</button>

<buttontype="button"class="btn btn-primary waves-light"data-toggle="modal"data-target="#exampleModal"data-whatever="@getbootstrap" (click)="show( '@getbootstrap' )"ripple-radius>Open modal for @getbootstrap</button>

<divclass="modal-dialog"role="document">

<divclass="modal-content">

<divclass="modal-header">

<h4class="modal-title"id="exampleModalLabel">New message to {{ name }}</h4>

<buttontype="button"class="close"data-dismiss="modal"aria-label="Close" (click)="content.hide()">

<spanaria-hidden="true">×</span>

</button>

</div>

<divclass="modal-body">

<form>

<divclass="md-form">

<inputtype="text"class="form-control"id="recipient-name" [value]="name">

</div>

<divclass="md-form">

<textareatype="text"id="message-text"class="md-textarea"></textarea>

</div>

</form>

</div>

<divclass="modal-footer">

<buttontype="button"class="btn btn-secondary waves-light"data-dismiss="modal" (click)="content.hide()"ripple-radius>Close</button>

<buttontype="button"class="btn btn-primary waves-light"ripple-radius>Send message</button>

</div>

Also, in my app.module I imports:

@NgModule({

declarations: [

AppComponent,

imports: [

HttpModule,

BrowserModule,

FormsModule,

MDBBootstrapModule.forRoot(),

GlobalModule,

TagManagerModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Please, any idea, what is causing my error?
Thanks in advance.

Add comment

Edyta Dabrowska answered 7 years ago

0 0 Best answer

Please tell me, are you creating a new component.ts? If not you can try adding only this part:


    @ViewChild('content') public contentModal;
    public name: string;

    show(value:string){
        this.name = value;
        this.contentModal.show();
    }

to your app.component.ts inside export class AppComponent {}. But you need to remember to add 'ViewChild' like this: import { Component, ViewChild } from '@angular/core';.

Orestes Garcia commented 7 years ago

Hi Edyta, Thanks for your answer, Yes, I created a new component for the modal. the idea is to reuse the modal component for different features in my app. I could fix the error by importing and exporting MDBBootstrapModule in a GlobalModule NgModule that I created for all my reusable components. Also, because the button that trigers the modal belongs to other component I have to declare the bsModal Directive on the modal selector this way => Then I'm using angular content projection in my modal component. This way the content of the modal can switch depending on what you want to show. <div> <pre> <div class="modal-dialog modal-full-height modal-left" role="document"> <divclass="modal-content"> <divclass="modal-header"> <ng-contentselect=".app-modal-header"></ng-content> </div> <divclass="modal-body"> <ng-contentselect=".app-modal-body"></ng-content> </div> <divclass="modal-footer"> <ng-contentselect=".app-modal-footer"></ng-content> </div> </div> </div> </pre> </div>

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

User: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

About author

Orestes Garcia

0Support score
2Questions 0Answers

0Snippets likes 0Snippets