Im trying to use a simple Modal in Angular 2, one that i can use in any page without the need to add a HTML tag, as i want to keep my .htmls clean. I was thinking of something like the Modal from bootstrap in Angular JS, but i wasnt able to find nothing like that. I tryed to use ngx-modialog but im having the following error:
MatchesComponent.html:37 ERROR TypeError: __WEBPACK_IMPORTED_MODULE_0__angular_core__.E.create is not a function
at DOMOverlayRenderer.webpackJsonp.../../../../ngx-modialog/bundle/ngx-modialog.es5.js.DOMOverlayRenderer.render (http://localhost:4200/vendor.bundle.js:59597:87)
at Overlay.webpackJsonp.../../../../ngx-modialog/bundle/ngx-modialog.es5.js.Overlay.createOverlay (http://localhost:4200/vendor.bundle.js:59555:48)
at http://localhost:4200/vendor.bundle.js:59537:47
at Array.map (native)
at Overlay.webpackJsonp.../../../../ngx-modialog/bundle/ngx-modialog.es5.js.Overlay.open (http://localhost:4200/vendor.bundle.js:59537:14)
at Modal$$1.webpackJsonp.../../../../ngx-modialog/bundle/ngx-modialog.es5.js.Modal.open (http://localhost:4200/vendor.bundle.js:59670:53)
at OneButtonPresetBuilder.webpackJsonp.../../../../ngx-modialog/bundle/ngx-modialog.es5.js.ModalOpenContextBuilder.open (http://localhost:4200/vendor.bundle.js:60002:30)
at MatchesComponent.webpackJsonp.../../../../../src/app/components/matches/matches.component.ts.MatchesComponent.viewItemInfo (http://localhost:4200/main.bundle.js:801:14)
at Object.eval [as handleEvent] (ng:///AppModule/MatchesComponent.ngfactory.js:61:27)
app.module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { ModalModule } from 'ngx-modialog';
import { BootstrapModalModule } from 'ngx-modialog/plugins/bootstrap';
import { AppComponent } from './app.component';
import { LoginComponent } from './components/login/login.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { AlertsComponent } from './components/alerts/alerts.component';
import { MatchesComponent } from './components/matches/matches.component';
import { ProductsComponent } from './components/products/products.component';
import { ShipmentsComponent } from './components/shipments/shipments.component';
import { ComplaintsComponent } from './components/complaints/complaints.component';
import { UsersComponent} from './components/users/users.component';
import { StatisticsComponent } from './components/statistics/statistics.component';
import { BillingComponent } from './components/billing/billing.component';
import { NotificationsComponent } from './components/notifications/notifications.component';
import { PagenotfoundComponent } from './components/pagenotfound/pagenotfound.component';
import { AuthService } from './services/auth.service';
const appRoutes: Routes = [
{ path: '', redirectTo: '/login', pathMatch: 'full'},
{ path: 'login', component: LoginComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'alerts', component: AlertsComponent, canActivate: [AuthService] },
{ path: 'matches', component: MatchesComponent, canActivate: [AuthService] },
{ path: 'products', component: ProductsComponent, canActivate: [AuthService] },
{ path: 'shipments', component: ShipmentsComponent, canActivate: [AuthService] },
{ path: 'complaints', component: ComplaintsComponent, canActivate: [AuthService] },
{ path: 'users', component: UsersComponent, canActivate: [AuthService] },
{ path: 'statistics', component: StatisticsComponent, canActivate: [AuthService] },
{ path: 'billing', component: BillingComponent, canActivate: [AuthService] },
{ path: 'notifications', component: NotificationsComponent, canActivate: [AuthService] },
{ path: '**', component: PagenotfoundComponent }
];
@NgModule({
declarations: [
AppComponent,
LoginComponent,
DashboardComponent,
AlertsComponent,
MatchesComponent,
ProductsComponent,
ShipmentsComponent,
ComplaintsComponent,
UsersComponent,
StatisticsComponent,
BillingComponent,
NotificationsComponent,
PagenotfoundComponent,
],
imports: [
BrowserModule,
HttpModule,
FormsModule,
ModalModule,
BootstrapModalModule,
RouterModule.forRoot(
appRoutes,
)
],
providers: [
AuthService,
],
bootstrap: [AppComponent]
})
export class AppModule { }
matches.component.ts
import { Component } from '@angular/core';
import { ApiService } from '../../services/api.service';
import { AuthService } from '../../services/auth.service';
import { TableComponent } from '../alerts/alerts.component';
import { Modal } from 'ngx-modialog/plugins/bootstrap';
import * as _ from 'lodash';
export class ItemsResult {
data: [Object];
total: number;
}
@Component({
selector: 'app-matches',
templateUrl: './matches.component.html',
styleUrls: ['./matches.component.less'],
providers: [ ApiService , AuthService ]
})
export class MatchesComponent {
tableHeaders: TableComponent[] = [
{ name: 'ID', attribute: '_id' },
{ name: 'Fecha de Expiración', attribute: 'expire_at' },
{ name: 'Item ID', attribute: 'item_id' },
{ name: 'Nombre Item', attribute: 'item_title'},
{ name: 'Order ID', attribute: 'order_id' },
{ name: 'Nombre Order', attribute: 'order_title' },
{ name: 'Stock', attribute: 'stock' },
{ name: 'Ver Order', attribute: '' }
];
filterOptions: TableComponent[] = [
{ name: 'ID', attribute: '_id' },
{ name: 'Item ID', attribute: 'item_id' },
{ name: 'Nombre Item', attribute: 'item_title' },
{ name: 'Order ID', attribute: 'order_id' },
{ name: 'Nombre Order', attribute: 'order_title' }
];
actualPage = 0;
filteredList;
total;
sorted = false;
filterType = this.filterOptions[0].attribute;
filterValue = '';
constructor( public apiService: ApiService, public auth: AuthService, public modal: Modal ) {
this.updateMatches();
}
updateMatches(): void {
this.apiService.getMatchesForPage(this.actualPage, '', this.filterType, this.filterValue).then((result: ItemsResult) => {
console.log(result);
this.total = result.total;
this.filteredList = result.data;
});
}
changePageUp(): void {
const limit = this.total / 100;
if (this.actualPage < limit) {
this.actualPage++;
}
this.updateMatches();
}
changePageDown(): void {
if (this.actualPage > 0) {
this.actualPage--;
}
this.updateMatches();
}
sortBy(attribute: string): void {
if (this.sorted) {
this.filteredList = _.orderBy(this.filteredList, [attribute], ['asc']);
} else {
this.filteredList = _.orderBy(this.filteredList, [attribute], ['desc']);
}
this.sorted = !this.sorted;
}
viewItemInfo(itemId): void {
this.modal.alert()
.size('lg')
.showClose(true)
.title('A simple Alert style modal window')
.body(`
<h4>Alert is a classic (title/body/footer) 1 button modal window that
does not block.</h4>
<b>Configuration:</b>
<ul>
<li>Non blocking (click anywhere outside to dismiss)</li>
<li>Size large</li>
<li>Dismissed with default keyboard key (ESC)</li>
<li>Close wth button click</li>
<li>HTML content</li>
</ul>`)
.open();
}
viewOrderInfo(orderId): void {
}
}
Im guessing the error is not due to the modal module but im missing some dependency, but i can't figure out which one, any help is much appreciated.
Regards,