The thruthiness of the expression is then going to get evaluated, to determine if the element should be shown or not.īesides booleans we can also pass to ngIf for example strings, arrays, objects, etc. The ngIf directive can take as input any valid Typescript expression and not just a boolean. What type of expressions can ngIf accept? In general, while building Angular applications, we should always prefer to hide elements using ngIf instead of using plain CSS. This is unlike the use of display:none, where no space on the page is occupied.īut in both cases, with CSS the elements are still present in the DOM, consuming resources however small, unlike with ngIf where hidden elements simply don't exist. With hidden visibility, the element will still occupy some blank space on the page, even though the element is hidden. The HTML element would be hidden from the user, but still present on the page upon inspection with the Dev Tools. With the CSS visibility attribute set to hidden, something very similar would occur. For example, if we set the display property to the value none, the HTML element will be hidden.īut if we inspect the page with the Dev Tools, we will see that DOM elements are still there present on the page, it's just that they are not visible: This is very different than the behavior of the display or visibility CSS properties. This comment is there just for debugging purposes, to help identify where the missing element should have been placed in case it was visible. Instead of it, you will find a strange-looking HTML comment similar to this one, where the ngIf directive was applied: Meaning that if you inspect the page using for example the Chrome Dev Tools, you won't find any HTML element present in the DOM. With ngIf, if an element is hidden then that element does not exist at all in the page. We can easily add or remove these CSS attributes to an HTML element using Javascript and hide an element from the page. This will show or hide the content of ng-container, without having to create an extra div just for that: How does ngIf compare to hiding elements using CSS?Įven though HTML does not have a built-in if statement, there are ways of hiding portions of the page with just plain CSS, by using the display and Instead, we can apply ngIf on top of the ng-container directive. In the case of container elements, if there is no container available for the section that we want to show or hide, then we don't have to create a container div just to be able to apply ngIf. What if I don't have anywhere convenient to apply ngIf? Inside the container div, there is a button only visible if the user is an administrator. In this example, the container div will only be shown to the user if the user is logged in, otherwise the whole content of the div is not visible. We need to pass a condition to ngIf, in order for it to work. The Angular ngIf directive works essentially as an if statement for HTML, adding this missing feature to the language under the form of the special ngIf attribute. So without further ado, let's get started learning everything that we need to know about Angular ngIf! What is Angular ngIf?Įven though HTML is also a programming language in its own right, it does not have an if statement, unlike for example Javascript. This post is part of our ongoing series on Angular Core features, you can find all the articles available here. A potential anti-pattern while consuming Observable data with ngIf.Consuming observable data with ngIf and the async pipe.What type of expressions can ngIf accept?.How does ngIf compare to hiding elements using CSS?.In this post, we will cover the following topics: In this post, we are going to cover all the features that we have available for using the Angular ngIf core directive.īesides the most commonly used features, we are going to learn how to avoid a potential ngIf anti-pattern that we might run into while developing more complex UI screens that consume a lot of Observable data coming from different sources (backend, Observable services, stores, etc.).
0 kommentar(er)
