title: Add html element (or angular component) on call of a function, in angular
body: <p>I have a component, that has a button. The button is connected to a function in the <code>.ts</code> file. Now, I want the function to add an HTML element or maybe un-hide it on the click of the button. I basically just want an html <code>&lt;div&gt;</code> element to become visible on the screen (with some dynamic data).</p>
  <p>Following is what the button in the <code>component.html</code> file looks like:</p>
  <pre><code>&lt;button mat-button (click)=&quot;getInfo()&quot; mat- cdkFocusInitial&gt;Ok&lt;/button&gt;
  </code></pre>
  <p>Following is what the <code>getInfo()</code> function in the <code>component.ts</code> file currently looks like:</p>
  <pre><code>getInfo(){
      console.log(&quot;Button clicked&quot;);
  }
  </code></pre>
  <p>So my objective is, on the click of the button, some element appears on the screen or maybe another angular component appears. Some advice on how to achieve that would be very helpful.</p>
  <p>Thanks in advance!</p>
  <p>PS: I am very new to front-end development, but I did try reading-up and searching on Stack-overflow and nothing comprehensive came up.</p>