Modal teamplate as directive and use in parent component in angular 2 - parent-child

Question

in Util - I am having
modal-dialog.component.ts
import {Component, Input, ViewChild, ViewContainerRef} from "#angular/core";
import {ModalDirective} from 'ng2-bootstrap/ng2-bootstrap';
#Component({
selector: 'custom-modal',
templateUrl: 'modules/util/template/modal-dialog.html',
exportAs: 'child' }) export class ModalDialogComponent {
#ViewChild('childModal') public childModal: ModalDirective;
public show(variant): void {
debugger
console.log(this.childModal);
this.childModal.show();
} }
modal-dialog.html
<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1"
role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Large modal</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div> </div>
Util.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { HttpModule, Http } from '#angular/http';
import { ModalDialogComponent } from '../../util/components/modal-dialog.component';
#NgModule({
imports: [
CommonModule,
HttpModule,
ModalModule
],
exports: [
CommonModule,
],
providers: [
],
declarations: [
ModalDialogComponent
] }) export class UtilModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: UtilModule
};
} }
app.module.ts
import UtilModule.forRoot()
test.component.html
<div>
<custom-modal></custom-modal>
<button type="button" class="btn btn-primary (click)="c.show(variant)">open</button>
</div>
and in test.component.ts /* system-defined */
import { Component, OnInit, OnDestroy, ViewChild, Directive, NgModule, ViewContainerRef} from '#angular/core';
import { Router, ActivatedRoute, Params } from '#angular/router';
#Component({
templateUrl: 'modules/sample/template/sample-test.component.html' })
export class SampleTestComponent {
}
I am unable to load child html on parent (test)
Unhandled Promise
rejection: Template parse errors: 'custom-modal' is not a known
element:
1. If 'custom-modal' is an Angular component, then verify that it is part of this module.
2. If 'custom-modal' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this
component to suppress this message. ("