Angular 2 Modal Directive Error with exportAs


Topic: Angular 2 Modal Directive Error with exportAs

Orestes Garcia asked 4 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:

<div class="bd-example">
<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>
<divbsModal #content="bs-modal"class="modal fade"id="exampleModal"tabindex="-1"role="dialog"aria-labelledby="exampleModalLabel"aria-hidden="true">
<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>
</div>
</div>
</div>
</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.


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 4 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><!-- Global Empty Modal --> <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> <!-- Modal --></pre> </div> <!-- Global Empty Modal --> <!-- Modal -->

Please insert min. 20 characters.
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