1

I am trying to get the ng-2 bootstrap modal to work in my code. I have already gotten the ng2-bootstrap tooltip to work no problems, but the modal is giving me a lot of trouble. I have checked all the relevant github pages and stackover flow questions but I still cannot figure it out. this is my setup:

My router.html (the template)

...
<div class="modal fade" alertModal #staticModal="alert-modal" role="dialog" aria-labelledby="alertModal">`

<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title" id="alertModalTitle"></h3>
        </div>
        <div class="modal-body" id="alertModalBody">

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>
...

Portion of my app.module.ts:

import { TooltipModule,ModalModule } from 'ng2-bootstrap';
@NgModule({
    imports: [ModalModule.forRoot(), TooltipModule.forRoot(), ...],
    declarations: [AppComponent,...],
    bootstrap: [AppComponent],
    providers: [...]
})
export class AppModule {}

My app.component.ts that uses this modal:

import { Component, OnInit, Inject, ViewChild, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { MultistepService, StepDirection } from '../service/multistep.service';
import { ModalDirective } from 'ng2-bootstrap';

@Component({
    selector: 'my-app',
    host: {
      'class': 'container-fluid'  
    },
    templateUrl: './app/component/router.html'
})

export class AppComponent implements OnInit {

    @ViewChild('staticModal') 
    private alertModal:ModalDirective;

    <some methods here>
}

This is the error I am getting:

Template parse errors:
There is no directive with "exportAs" set to "alert-modal"

Is there anything I am missing? thanks in advance!

Karan
  • 1,335
  • 2
  • 14
  • 29
  • They set it equal not to something but to `exportAs` variable https://github.com/valor-software/ngx-bootstrap/blob/development/src/modal/modal.component.ts#L40 You can think about `#staticModal="bs-modal"` like `#something="exportAsVar"`. You can call your `#variable` whatever you want but it should be always equal `bs-modal` i.e. `#myMegaVariable="bs-modal"` and then you can use `myMegaVariable.show()` in template – yurzui Jul 15 '17 at 04:35

2 Answers2

1

On the first line of your template, change #staticModal="alert-modal" to #staticModal

Kai
  • 2,529
  • 1
  • 15
  • 24
  • omg why did that work?! in their docs they have this example: `
    ` where they put static modal = to something.     – Karan Jul 14 '17 at 18:23
  • That bit of code just creates a template variable, `staticModal`, for convenience in accessing the element from the @ViewChild decorator. It doesn't actually need to do anything else! You could literally replace `staticModal` with any other name, as long as it was consistent in both locations – Kai Jul 14 '17 at 18:27
  • Ah i see. so do you know why in their example they set it equal to something? That part is confusing me. – Karan Jul 14 '17 at 18:41
1

For this part:

<div class="modal fade" alertModal #staticModal="alert-modal"

there's a directive alertModal applied. You're trying to access it in the component:

 @ViewChild('staticModal') private alertModal:ModalDirective;

However, there is no need to introduce template reference variable staticModal, you can access the directive directly by class:

 @ViewChild(ModalDirective) private alertModal:ModalDirective;

The template reference variable staticModal would be needed if you wanted to reference the instance of ModalDirective in some other place in html:

<div class="modal fade" alertModal #staticModal="alertModal"...
<span>{{staticModal.someProperty}}</span>

However, for this to work the ModalDirective class has to define exportAs in the decorator like this:

@Directive({
   exportAs: "alertModal"
Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
  • This is great! I think i understand it now. It is working but when I use the modal in my component, I try to do "alertModal.show() which is a builtin function of the ModalDirective. However, it keeps saying that `show is not a function` because alertModal is being treated as an "ElementRef" object, now as a Modal Directive Object. Do you know why that could be? – Karan Jul 14 '17 at 21:06
  • @aBrokenSniper, if you query it like this `@ViewChild(ModalDirective)`, then it will contain the correct class. If you query it using template reference, you will have to add `read` parameter, [here](https://stackoverflow.com/a/45064618/2545680) I explain it. – Max Koretskyi Jul 15 '17 at 13:13