Sharing Top Content from the Angular-sphere.

Angular’s NgIf, Else, Then

  • Once evaluated, Angular will simply add or remove your DOM nodes, mount or remount your components, from the DOM – as the expression changes (if it ever does, that’s up to you).
  • The basic syntax of the directive is simple and effective, all we need to do is prefix the directive name with an asterisk ( ) and add it anywhere inside our .
  • There are four main ways we can use , so let’s start by exploring the most basic use case: – – We can also use JavaScript-like expressions to achieve a final truthy/falsy value to supply to – as well as composing through multiple variables through various operators: – – Just…
  • In AngularJS we’d have to negate the expression to evaluate to an “else”, and templates became a little messy at times.
  • When it’s needed (for example the “else” expression kicks into play), Angular will grab the contents of the tag, and replace the contents with it.

Using the ngIf directive allows us to simply toggle content based on a conditional. But is it as simple as we think? Not quite, the directive has a heap of h…

Using the directive allows us to simply toggle content based on a conditional. But is it as simple as we think? Not quite, the directive has a heap of helpful syntaxes that can help us deal with conditionals far better, and also asynchronous objects coming from perhaps an Observable.

Let’s explore the ins and outs of , and how we can utilise (the right way) in our Angular apps.

Placing the directive on a component, or element, will in fact hide or show that element based on the expression you pass it to be evaluated. Once evaluated, Angular will simply add or remove your DOM nodes, mount or remount your components, from the DOM – as the expression changes (if it ever does, that’s up to you).

The basic syntax of the directive is simple and effective, all we need to do is prefix the directive name with an asterisk ( ) and add it anywhere inside our . We’ll cover why we use the asterisk syntax, shortly.

There are four main ways we can use , so let’s start by exploring the most basic use case:

We can also use JavaScript-like expressions to achieve a final truthy/falsy value to supply to – as well as composing through multiple variables through various operators:

Just a few examples, but I’m sure…

Angular’s NgIf, Else, Then

Comments are closed, but trackbacks and pingbacks are open.