Angular 5 - Can't Pass Data to Modal - modal-dialog

Question

Short summary of what i actually want to do.
If i click on the heroes table. I need to pass the heroes data from the row clicked to a Modal.
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.
I've simply got a table in which all my heroes are displayed.
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).
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.
At the moment I can't even display the heroes name I want to delete
I hope anyone can tell my what I can do and how.
Thank you.
Here is my code:
Shows my Heroes: hero.component.html
<div class="container">
<h2>Heroes</h2>
<input type="text" placeholder="Suchbegriff eingeben" class="form-control has-float-label" [(ngModel)]="filter" >
<br>
<div *ngIf="heroes">
<table class="heroes table table-hover table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let hero of heroes | filter:filter:'name':'name'">
<td>{{hero.name}}</td>
// 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
<td>
<ngbd-modal-component (click)="selectRow(hero) [(delhero)]="delhero""></ngbd-modal-component> </td>
</tbody>
</table>
</div>
</div>
heroes.component.ts
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<Hero[]>;
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);
}
}
Hero Service
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;
}
}
My Modal
modal.component.html
<button class="btn btn-danger btn-xs more" (click)="open()"> <span class="fa fa-trash"></span></button>
modal.component.ts
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");
}
}
modal.content.component.html
<div class="modal-header ">
<h4 class="modal-title">Delete Hero?</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Delete Hero with Name: {{name}}?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">No, do not delete</button>
<button type="button" class="btn btn-primary">Ja, löschen</button>
</div>
modal.content.component.ts
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);
}
}

Answer 1

Not sure if this helps but I found this after having the same problem.
I ended up with working code. Sorry it's not your code but I was having trouble following it. I had to set a variable and pass it in via the click code:
HTML:
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Option Entry</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label class="control-form-label" for="optDescription">Description:</label>
<input type="text" class="form-control" name="description" ngModel id="optDescription" [(ngModel)]="editOption">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Update</button>
</div>
</ng-template>
<div *ngIf='optionList && optionList.length'>
<div *ngFor='let opt of optionList'>
<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0" class="accordianheading">
<ngb-panel>
<ng-template ngbPanelTitle>
<span>{{opt.description}}</span>
<button class='btn btn-sm btn-outline-primary btnline pull-right' (click)='$event.preventDefault(); $event.stopPropagation(); editItem(content, opt)'>Edit</button>
</ng-template>
<ng-template ngbPanelContent>
<js-option-lists [OptionListID]=opt.id></js-option-lists>
</ng-template>
</ngb-panel>
</ngb-accordion>
</div>
</div>
and:
.ts file
import { Component, OnInit, Input } from '#angular/core';
import { IOptionListHeader } from '../dtos/option-list-header';
import { OptionListService } from '../services/felixApi/option-list.service';
import { NgbModal, ModalDismissReasons } from '#ng-bootstrap/ng-bootstrap';
import { NgModel, NgForm } from '#angular/forms';
#Component({
selector: 'js-option-lists',
templateUrl: './option-lists.component.html',
styleUrls: ['./option-lists.component.css']
})
export class OptionListsComponent implements OnInit {
#Input() OptionListID: number;
errorMessage: any;
optionList: IOptionListHeader[] = [];
updatedOption: any;
closeResult: string;
editOption = '';
constructor(private _optionListService: OptionListService, private modalService: NgbModal) { }
// for now read in all options but will need to read by level
ngOnInit() {
this.getChildren(this.OptionListID);
}
getChildren (id) {
this._optionListService.getOptionListChildren(id)
.subscribe(
optionList => {
this.optionList = optionList;
},
error => this.errorMessage = <any>error);
}
// Patch change
patchOrderNo(updatedOption: any) {
this._optionListService.updateOption(updatedOption).subscribe(
res => {
this.getChildren(this.OptionListID);
},
err => {
console.log('error code ' + err.status);
}
);
}
editItem(content, opt: IOptionListHeader) {
this.editOption = opt.description;
this.modalService.open(content).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
this.updatedOption = { id: opt.id, description: this.editOption };
this.patchOrderNo(this.updatedOption);
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
console.log('cancelled');
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
}