134k views
4 votes
How to show/hide component on button click in angular 8

User Satender
by
6.8k points

1 Answer

3 votes

Final answer:

In Angular 8, to show/hide a component on button click, use the ngIf directive and a boolean property to manage the component's visibility state. A button's click event toggles this property, thus toggling the visibility of the component.

Step-by-step explanation:

To show or hide a component on button click in Angular 8, you can use ngIf directive along with a component property that keeps track of the visibility state. Here's a step-by-step guide:Each time the button is clicked, the showComponent property will toggle between true and false, causing the component to show and hide accordingly.To show or hide a component on button click in Angular 8, you can make use of property binding and event binding. First, you will need to define a boolean variable in your component's TypeScript file to determine the visibility of the component. For example, let's say you have a boolean variable called 'showComponent' set to false initially. Then, in your HTML template, you can use the *ngIf directive to conditionally show or hide the component based on the value of 'showComponent'.

Here's an example:

<button (click)="showComponent = !showComponent">Toggle Component</button>

<div *ngIf="showComponent">

<app-your-component></app-your-component>

</div>

In this example, when the button is clicked, it will toggle the value of 'showComponent', causing the component to be shown or hidden based on its current value.

User Alex Kapustin
by
7.6k points