Add html element (or angular component) on call of a function, in angular

I have a component, that has a button. The button is connected to a function in the .ts 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 <div> element to become visible on the screen (with some dynamic data).

Following is what the button in the component.html file looks like:

<button mat-button (click)="getInfo()" mat- cdkFocusInitial>Ok</button>

Following is what the getInfo() function in the component.ts file currently looks like:

getInfo(){
    console.log("Button clicked");
}

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.

Thanks in advance!

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.

You can do this by simply adding a boolean in your component.

showEl = false;

and on clicking button,

getinfo() {
   this.showEl = !this.showEl;
}

And in template, you can use *ngIf to show/hide the content.

<button (click)="isShowInfo = !isShowInfo">Toggle me</button>

<div *ngIf="isShowInfo">
   <p>Here is my info</p>
</div>