Here I am using two components for my construction application one is Parent component Innerwalls and other Modal component. My modal opens successfully but unable to close the Modal from the Modal component.
I am passing data from the Parent to the Child modal component using the Input Directive.
Below are the Snippets from each component’s HTML and Typescript file.
Innerwall.component.html (parent) Component:
Below is the snippet from the parent component HTML where i am calling the Modal component. Here I am binding the close (which is used passed to the child component as Input) with the closeModal function as template expression.
Below are the functions for the Opening and closing the modal which add and removes the Display CSS property using the Hidden and Show classes to the Modal component view.
Here I am using the close as an Input Property to modal component as modal_1 element ID is present in the Parent component.
Here am binding click event to the passed close Input property.
Click event on Close Button does not close the Modal.
Modal closes when close button is clicked.
2>If i add Paranthesis over the closeModal template expression then do not see the ng-reflect close in the element console. So i am wondering why would paranthesis in template expression does nt binds the function.
[close] = "closeModal()"
3> Thought of checking by making the closeModal function return something. Hence checked by returning a simple console log by the closeModal function. But clicking on close button did not show anything on the console as was expected from the return statement.
All the above steps did not solve the issue.
Need all your advice or suggestions to complete this modal. Any clarification needed please let me know. This is my first help posted in Angular and am very new to this framework. Please help. Thanks.