I'm struggling with jQuery in Angular2. It doesn't wanna popout my modal.
Error message:
Used Angular-cli npm install and then yarn to install bootstrap +
In my .angular-cli.json i've got.
"scripts": [
"../node_modules/jquery/dist/jquery.js"
],
jQuery.service.ts
import { OpaqueToken } from '@angular/core';
export const JQ_TOKEN = new OpaqueToken('jQuery');
// return the global instance of jquery
export function jQueryFactory() {
return window['jQuery'];
}
// providers
export const JQUERY_PROVIDER = [
{ provide: JQ_TOKEN, useFactory: jQueryFactory },
];
Created modal-trigger.directive.ts
import { Directive, OnInit, Inject, ElementRef } from '@angular/core';
import { JQ_TOKEN } from '../services/jQuery.service';
@Directive({
selector: '[appModalTrigger]'
})
export class ModalTriggerDirective implements OnInit {
private el: HTMLElement;
constructor(ref: ElementRef, @Inject(JQ_TOKEN) private $: any) {
this.el = ref.nativeElement;
}
ngOnInit() {
this.el.addEventListener('click', e => {
this.$('#vote-modal').modal({})
})
}
}
Took modal from bootstrap
<div class="modal fade" id="vote-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
My app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { JQUERY_PROVIDER } from './services/jQuery.service';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { MovieListComponent } from './movies/movie-list/movie-list.component';
import { FooterComponent } from './footer/footer.component';
import { SearchBarComponent } from './movies/search-bar/search-bar.component';
import { MovieService } from './services/movie.service';
import { MovieDetailComponent } from './movies/movie-detail/movie-detail.component';
import { appRoutes } from './routes';
import { MoviesComponent } from './movies/movies.component';
import { VoteModalComponent } from './movies/vote-modal/vote-modal.component';
import { ModalTriggerDirective } from './triggers/modal-trigger.directive';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
MovieListComponent,
FooterComponent,
SearchBarComponent,
MovieDetailComponent,
MoviesComponent,
VoteModalComponent,
ModalTriggerDirective
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(appRoutes)
],
providers: [
MovieService,
JQUERY_PROVIDER
],
bootstrap: [AppComponent]
})
export class AppModule { }
And my index.html - saw solutions with adding bootstrap and jquery over here. It didn't resolve my problem.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MovieRating</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Alike+Angular" rel="stylesheet">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
Hope someone will help :)
