title: how to open ng bootstrap modals from another component?
body: <p>I want to open or close modals from Another Module with the help of component 1. But currently I am unable to access the modalRef of ngBootstrap of the modals in that component so that I can close/open it.</p>
  
  <p>Suppose this scenerio</p>
  
  <p><strong>One Module</strong></p>
  
  <pre><code>&lt;component1&gt;&lt;/component1&gt;
  </code></pre>
  
  <p><strong>Another Module</strong>
  this module have multiple components and each component have modal in it which I need to show or hide based on the conditions from component 1.</p>
  
  <pre><code>&lt;component2&gt; //have ng bootstrap modal in it &lt;/component2&gt;
  &lt;component3&gt; //have ng bootstrap modal in it &lt;/component3&gt;
  &lt;component4&gt; //have ng bootstrap modal in it &lt;/component4&gt;
  &lt;component5&gt; //have ng bootstrap modal in it &lt;/component5&gt;
  &lt;component6&gt; //have ng bootstrap modal in it &lt;/component6&gt;
  </code></pre>
  
  <p>Currently I am doing this by just putting one hidden button in that module and the click it using the JavaScript from another component, I know that this is not a good approach so I want someone to give me some approach to calling these modals or tell me if there is anything to change in the design.</p>
  
  <p>As far as I know I think service will be good to do this. But before changing the design I want someone opinion. Thanks</p>