![]() ![]() If we want to hide the Display Data button when the content displays the Hide Data button when the data is hidden, we can also use the same concept on buttons. # AngularĪs you can see in the above example, we can easily hide and display content using *ngIf and button (click) methods. #Showhide type code#We will now add some CSS code to make our buttons look good. showData() will change the value of element to true and hideData() will change the value of the element to false. Now, let’s create these two functions in. We need to create these two buttons outside the div, so they don’t get hidden when the condition is changed to false. Now, let’s create two buttons having two functions showData() and hideData(). We can create this simple example using the same *ngIf. Imagine if we want to display and hide data whenever certain buttons are clicked. ![]() You can now see that when we changed the value of the element, the condition we set on div changed, and it started to show the div with all the elements inside it. Now, Let’s change the value of the element to true and check how it works. So, the div will be hidden because we have set the element as false. # AngularĪs you can see in the above example, we have set a condition if the element is true, the div will be displayed, and if the condition is false, it will not display. We will use *ngIf to display and hide our div based on the condition. Now, in, we create a new variable element and set it as false. We can show and hide it using this example.įirst, we will create a demo content in that will include a heading, paragraph, and an input field, and we will wrap it in a div. Suppose we have a template or a block of code that we want to display only if the condition is true and hide it when false. Now, let’s run our app to check if all dependencies are installed correctly. # angularĪfter creating our new application in Angular, we will go to our application directory using this command. Let’s create a new application by using the following command. In this tutorial, I am going to show you a simple way by using which we can show and hide data based on conditions. We have to display the same data according to the conditions in that application. When developing a commercial application, we need to hide some data based on user roles or conditions.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |