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

Question

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.

I think you can use *ngIf directive in .html and in .ts file create some boolean variable. After that in your method change this boolean variable to true - than element in html will appear. — Mateusz Ścigała
– Mateusz Ścigała, Commented Jan 19, 2022 at 20:19
So you want to add dynamically an html element/angular component or this will be hidden and you want to show it up? — tufonas
– tufonas, Commented Jan 19, 2022 at 20:21
@tufonas I actually want the element to be added dynamically, but if it's not possible, then I can work with un-hiding the element. — Eshita Shukla
– Eshita Shukla, Commented Jan 19, 2022 at 20:38

Adnan Khalid Shah · Accepted Answer · 2022-01-19 21:27:25Z

1

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.

answered Jan 19, 2022 at 21:27

Adnan Khalid Shah

1067 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Random · Accepted Answer · 2022-01-19 21:33:10Z

1

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

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

answered Jan 19, 2022 at 21:33

Random

3,2551 gold badge18 silver badges25 bronze badges

Comments

tufonas · Accepted Answer · 2022-01-19 21:00:26Z

0

You can use the hashtag of angular to make your code simpler.

<button (click)="testId.style.visibility = 'visible'">Unhide me</button>

<div style="visibility: hidden;" #testId>
   i am hidden
</div>

If you want to unhide it from the typescript you have to use @ViewChild to watch the hidden element and when you call one method on click you will set the visibility to visible

answered Jan 19, 2022 at 21:00

tufonas

3131 silver badge7 bronze badges

2 Comments

Random Over a year ago

avoid using "style" tag. avoid using "visibility: hidden". avoid using template-var. Use *ngIf as much as possible.

Adnan Khalid Shah Over a year ago

Agreed with @Random

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related