title: Angular 5 - Can't Pass Data to Modal
body: <p><strong>Short summary of what i actually want to do.
  <br> If i click on the heroes table. I need to pass the heroes data from the row clicked to a Modal.</strong></p>
  
  <p>I read that there are two ways to get Data into a Modal. (NGMODAL)
  With @Input and @Output or through a shared Service.
  But it doesn't matter which way I am using. The modal opens (and fetches data) always before the data is passed.</p>
  
  <p>I've simply got a table in which all my heroes are displayed.</p>
  
  <p>On a Click on the delete button in a table row I wan't to open the modal and pass the data from my table row. (I want to pass the whole hero, but shouldn't be a difference to just passing the name of the hero).</p>
  
  <p>After that i want to show.
  Do you really want to delete hero with name...?
  [Cancel], [Yes, Delete] . Onclick on the Yes, Delete Button I want to delete the hero.</p>
  
  <p><strong>At the moment I can't even display the heroes name I want to delete</strong></p>
  
  <p>I hope anyone can tell my what I can do and how.</p>
  
  <p>Thank you.</p>
  
  <p>Here is my code:</p>
  
  <p>Shows my Heroes: hero.component.html</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;h2&gt;Heroes&lt;/h2&gt;
      &lt;input type="text" placeholder="Suchbegriff eingeben" class="form-control has-float-label" [(ngModel)]="filter" &gt;
      &lt;br&gt;
      &lt;div *ngIf="heroes"&gt;
        &lt;table class="heroes table table-hover table table-striped"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Delete&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                &lt;tr *ngFor="let hero of heroes | filter:filter:'name':'name'"&gt;                  
                &lt;td&gt;{{hero.name}}&lt;/td&gt;
  </code></pre>
  
  <p>// I could use (click)="pusHero(hero)" and open the modal afterwars. Than i would get the right data through input. But when i click to open the modal first there is no data, or the data from the row clicked before </p>
  
  <pre><code>       &lt;td&gt;
              &lt;ngbd-modal-component (click)="selectRow(hero) [(delhero)]="delhero""&gt;&lt;/ngbd-modal-component&gt;  &lt;/td&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>heroes.component.ts</p>
  
  <pre><code>import { Component, OnInit, ViewEncapsulation , Input , EventEmitter} from '@angular/core';
  import { Hero } from '../../model/hero';
  import { HeroService } from '../hero.service';
  import { CommonModule } from '@angular/common';
  import { Observable } from 'rxjs/Observable';
  import { Response } from '@angular/http/src/static_response';
  // For use of map
  import 'rxjs/Rx';
  // Für Pipe und Suche in Liste
  import { Pipe, PipeTransform } from '@angular/core';
  import { FilterPipe } from '../../pipes/filter.pipe';
  
  // Component Decorator imported from Component
  @Component({
    // Unique Selector
    selector: 'app-hero',
    // URL of Template
    templateUrl: './hero.component.html',
    // URL of stylesheet
    styleUrls: ['./hero.component.css']
    // encapsulation: ViewEncapsulation.None
  })
  export class HeroesComponent implements OnInit {
    heroes: Observable&lt;Hero[]&gt;;
    hero: Hero;
    filter = '';
  
    // Is Input for Child Component. In this case modal
    delhero: Hero;
  
    constructor(
      private heroService: HeroService,
      // Modal Service
      // private modalService: NgbModal,
      // private ngbdModalComponent: NgbdModalComponent,
      // private ngbdModalContent: NgbdModalContent,
      ) {
      // this.searchableList = ['name','age']  
     }
  
  
    selectRow(hero): void {
      console.log("Select the tables data");  
      console.log(hero);
      this.heroService.selectRow(hero);
    }
  }
  </code></pre>
  
  <p>Hero Service</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { HttpResponse } from '@angular/common/http';
  import { Observable } from 'rxjs/Observable';
  import { of } from 'rxjs/observable/of';
  import { catchError, map, tap } from 'rxjs/operators';
  import { Hero } from '../model/hero';
  import { MessageService } from '../message.service';
  import { Response } from '@angular/http/src/static_response';
  // For use of map
  import 'rxjs/Rx';
  import { headersToString } from 'selenium-webdriver/http';
  
  const httpOptions = {
    headers: new HttpHeaders(
      { 
        'Content-Type': 'application/json'
      }
    )
  };
  
  @Injectable()
  export class HeroService {
  
    private hero: Hero;
    constructor(private http: HttpClient, private messageService: MessageService) { }
  
  
    selectRow(input){
      this.hero = input;
    }
  
    getRow(){
      console.log(this.hero);
      return this.hero;
    }
  }
  </code></pre>
  
  <p>My Modal</p>
  
  <p>modal.component.html</p>
  
  <pre><code>&lt;button class="btn btn-danger btn-xs more" (click)="open()"&gt; &lt;span class="fa fa-trash"&gt;&lt;/span&gt;&lt;/button&gt;
  </code></pre>
  
  <p>modal.component.ts</p>
  
  <pre><code>import { Component, Input, EventEmitter, SimpleChange, Output, OnInit } from '@angular/core';
  import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
  import { NgbdModalContent } from './modal.content.component';
  import { Hero } from '../../model/hero';
  import { HeroService } from '../../hero/hero.service';
  
  // Modal Component
  @Component({
    selector: 'ngbd-modal-component',
    templateUrl: './modal.component.html'
  })
  
  export class NgbdModalComponent {
    // @Input() delhero: Hero;
    // hero: Hero;
    // @Output() getDeleteHero = new EventEmitter();
    name = '';
    constructor(private modalService: NgbModal,
    private heroService: HeroService) {}
    ngOnInit(){
      // this.open();
      // console.log(this.delhero);
    }
    open() {
      var name = this.heroService.getRow();
      // this.getDeleteHero.emit();
      console.log("Modal Component hero");
      // console.log(this.delhero);
      this.name = this.heroService.getRow().name;
      const modalRef = this.modalService.open(NgbdModalContent);
      modalRef.componentInstance.name = name;
    }
    delete(){
      console.log("Delete Hero through Hero Service");
    }
  }
  </code></pre>
  
  <p>modal.content.component.html</p>
  
  <pre><code>&lt;div class="modal-header "&gt;
          &lt;h4 class="modal-title"&gt;Delete Hero?&lt;/h4&gt;
          &lt;button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;Delete Hero with Name: {{name}}?&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')"&gt;No, do not delete&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Ja, löschen&lt;/button&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>modal.content.component.ts</p>
  
  <pre><code>import { Component, Input, EventEmitter } from '@angular/core';
  import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
  import { HeroService } from '../../hero/hero.service';
  import { Hero } from '../../model/hero';
  // Modal Content
  @Component({
    selector: 'ngbd-modal-content',
    templateUrl: './modal.content.component.html'
  //   styleUrls: ['./modal.content.component.css']
  })
  export class NgbdModalContent {
  //   @Input() Hero;
  name = "";
    constructor(
        public activeModal: NgbActiveModal,
        privateheroService: HeroService
      ) {}
  
      ngOnInit() {
          //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
          //Add 'implements OnInit' to the class.
          console.log("NG On Init ModalsContent");
          this.name = this.heroService.getRow().name;
          console.log(this.name);
  
      }
  }
  </code></pre>