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){ = value;;

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">
<h4class="modal-title"id="exampleModalLabel">New message to {{ name }}</h4>
<buttontype="button"class="close"data-dismiss="modal"aria-label="Close" (click)="content.hide()">
<inputtype="text"class="form-control"id="recipient-name" [value]="name">
<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>

Also, in my app.module I imports:

declarations: [
imports: [
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){ = value;; } 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.


Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No