title: Angular 5 with bootstrap
body: <p>I am working on Angular 5 , while running my application I am getting error,<a href="https://i.stack.imgur.com/ICqpu.png" rel="nofollow noreferrer">Angular error</a></p>
  
  <p>Can you please help me to solve this issue?  Thanks in advance.</p>
  
  <p>This is work in progress code so few imported modules are not used in below code. </p>
  
  <p>My App Module,</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  
  import { AppComponent } from './app.component';
  import {Header} from './ts/header';
  import {Footer} from './ts/footer';
  import {DisplayModuleModule} from './display-module/display-module.module';
  import {RoutingModule} from './routing/routing.module';
  
  @NgModule({
    declarations: [
      AppComponent,
      Header,
      Footer
    ],
    imports: [
      BrowserModule,
      RoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>In this RoutingModule is my custom module as below,</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import {RouterModule, Routes} from '@angular/router';
  
  import {BusinessModule} from '../business/business.module';
  import {Popupmodal} from './ts/popupmodal';
  import {Home} from './ts/home';
  
  const routes: Routes = [
    {'path':'', 'redirectTo':'/home', 'pathMatch':'full'},
    {'path':'home', 'component':Home}
  ]
  @NgModule({
    imports: [
      CommonModule,
      BusinessModule,
      RouterModule.forRoot(routes)
    ],
    declarations: [
      Home,
      Popupmodal
    ],
    exports:[
      RouterModule,
      BusinessModule
    ]
  })
  export class RoutingModule { }
  </code></pre>
  
  <p><strong>home.ts</strong></p>
  
  <pre><code>import {Component, Inject} from '@angular/core';
  import {Router} from '@angular/router';
  import {Popupmodal} from './popupmodal';
  
  @Component({
    selector : 'home-page',
    templateUrl:'../html/home.html'
  })
  export class Home{
    display= 'none';
    constructor(@Inject(Router) private route:Router,
                @Inject(Popupmodal) private modal: Popupmodal){
  
    }
    openPopUP(){
      this.display = 'block';
      this.modal.openModalPopUP();
    /*this.route.navigate(['/popUp']).then(nav =&gt; console.log('Successfuly Navigated'),
    );*/
    }
    closePopUp(){
      this.display = 'none';
    }
  
  }
  </code></pre>
  
  <p><strong>home.html</strong></p>
  
  <pre><code>    &lt;div&gt;
        &lt;button (click)="openPopUP()" &gt;Click&lt;/button&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>popupmodal.ts</strong></p>
  
  <pre><code>import {Component} from '@angular/core';    
  @Component({
    selector: 'popup-modal',
    templateUrl:'../html/popupModal.html'
  })
  export class Popupmodal{
    display= 'none';
    openModalPopUP(){
      this.display = 'block';
    }
    closeUpPopUp(){
      this.display = 'none';
    }
  }
  </code></pre>
  
  <p><strong>popupModal.html</strong></p>
  
  <pre><code>&lt;div class="backdrop" [ngStyle]="{'display':display}"&gt;&lt;/div&gt;
  
  &lt;div class="modal" tabindex="-1" role="dialog"  [ngStyle]="{'display':display}"&gt;
  
    &lt;div class="modal-dialog" role="document"&gt;
  
      &lt;div class="modal-content"&gt;
  
        &lt;div class="modal-header"&gt;
  
          &lt;button type="button" class="close" aria-label="Close" (click)="closeUpPopUp()"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
  
          &lt;h4 class="modal-title"&gt;Model Title&lt;/h4&gt;
  
        &lt;/div&gt;
  
        &lt;div class="modal-body"&gt;
  
          &lt;p&gt;Model body text&lt;/p&gt;
  
        &lt;/div&gt;
  
        &lt;div class="modal-footer"&gt;
  
          &lt;button type="button" class="btn btn-default" (click)="closeUpPopUp()" &gt;Close&lt;/button&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;&lt;!-- /.modal-content --&gt;
  
    &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  
  &lt;/div&gt;&lt;!-- /.modal !--&gt;
  </code></pre>
  
  <p><strong>Update</strong>
  I solved this issue by using  @ViewChild in my home.ts as follow,</p>
  
  <pre><code>import {Component, Inject, ViewChild} from '@angular/core';
  import {Router} from '@angular/router';
  import {Popupmodal} from './popupmodal';
  
  @Component({
    selector : 'home-page',
    templateUrl:'../html/home.html'
  })
  export class Home{
    @ViewChild(Popupmodal) modal : Popupmodal;
  
    openPopUP(){
      this.modal.openModalPopUP();
    /*this.route.navigate(['/popUp']).then(nav =&gt; console.log('Successfuly Navigated'),
    );*/
    }
    closePopUp(){
  
    }
  
  }
  </code></pre>