As a newcomer to Angular 6, I am facing challenges with passing data between components.
I am trying to launch a child component bootstrap modal from the parent modal and need to pass a string parameter to the child modal component. Additionally, I want to execute a function as soon as the modal opens, which returns an array displayed in a table.
Parent Component HTML
<div class="parent-comp">
<div id="ext-modal" class="modal fade" role="dialog">
<!-- Modal content Starts-->
<app-f-ext [Id]="Id"></app-f-ext>
<!-- Modal content Ends-->
</div>
</div>
Child component TS
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-premium-extension',
templateUrl: './premium-extension.component.html',
styleUrls: ['./premium-extension.component.css']
})
export class ExtensionComponent implements OnInit {
@Input() Id: string;
constructor() {
}
ngOnInit() {
}
callThisFunctionOnOpeningModal(){
console.log(Id)
}
}
Child component HTML
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Ext {{Id}}</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
Parent Component TS
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'ap-detail',
templateUrl: './p-details.component.html',
styleUrls: ['./p-details.component.css']
})
export class PDetailsComponent implements OnInit {
Id: string;
constructor(){
this.Id = "test";
}
}
When the modal is opened, the Id is displayed in the header. How can I trigger a function upon loading the modal and pass the Id to that function?
Please refrain from downvoting the question, as I am genuinely struggling with this issue. Thank you in advance for your assistance.