How to use ngIf else

Question

I m using Angular and I want to use  ngIf else  available since version 4  in this example     lt div  ngIf  isValid  gt    content here      lt  div gt    lt div  ngIf   isValid  gt   other content here     lt  div gt    How can I acheive the same behavior with ngIf else

User · Answer

Just add new updates from Angular 8    For case if with else  we can use ngIf and ngIfElse     lt ng-template  ngIf   condition   ngIfElse   elseBlock  gt    Content to render when condition is true   lt  ng-template gt   lt ng-template  elseBlock gt    Content to render when condition is false   lt  ng-template gt     For case if with then  we can use ngIf and ngIfThen     lt ng-template  ngIf   condition   ngIfThen   thenBlock  gt    This content is never showing  lt  ng-template gt   lt ng-template  thenBlock gt    Content to render when condition is true   lt  ng-template gt     For case if with then and else  we can use ngIf  ngIfThen  and ngIfElse     lt ng-template  ngIf   condition   ngIfThen   thenBlock   ngIfElse   elseBlock  gt    This content is never showing  lt  ng-template gt   lt ng-template  thenBlock gt    Content to render when condition is true   lt  ng-template gt   lt ng-template  elseBlock gt    Content to render when condition is false   lt  ng-template gt

User · Answer

lt div  ngIf  this model SerialNumber       then ConnectedContent else DisconnectedContent  class  data-font  gt      lt  div gt    lt ng-template  ConnectedContent class  data-font  gt Connected lt  ng-template gt   lt ng-template  DisconnectedContent class  data-font  gt Disconnected lt  ng-template gt

User · Answer

lt div  ngIf  quot show  else elseBlock quot  gt Text to show lt  div gt   lt ng-template  elseBlock gt Alternate text while primary text is hidden lt  ng-template gt

User · Answer

bindEmail  it will check email is available or not  if email is exist than Logout will show otherwise Login will show   lt li  ngIf  bindEmail then logout else login  gt  lt  li gt   lt ng-template  logout gt  lt li gt  lt a routerLink   logout  gt Logout lt  a gt  lt  li gt  lt  ng-template gt   lt ng-template  login gt  lt li gt  lt a routerLink   login  gt Login lt  a gt  lt  li gt  lt  ng-template gt

User · Answer

To work with observable  this is what I usually do to display if the observable array consists of data    lt div  ngIf   observable    async  as listOfObject else emptyList  gt      lt div  gt                    lt  div gt   lt  div gt    lt ng-template  emptyList gt      lt div  gt                   lt  div gt   lt  ng-template gt

User · Answer

You can Use  lt ng-container gt  and  lt ng-template gt  for Achieve This    lt ng-container  ngIf  isValid  then template1 else template2  gt  lt  ng-container gt    lt ng-template  template1 gt        lt div gt Template 1 contains lt  div gt   lt  ng-template gt    lt ng-template  template2 gt        lt div gt Template 2 contains  lt  div gt   lt  ng-template gt    You can find the Stackblitz Live demo below   live demo  Hope This will helps

User · Answer

I know this has been a while  but want to add it if it helps  The way I went about with is to have two flags in the component and two ngIfs for the corresponding two flags    It was simple and worked well with material as ng-template and material were not working well together

User · Answer

You can also use Javascript short ternary conditional operator   in angular like this     doThis      foo     bar      or    lt div  ngClass   doThis      foo     bar   gt

User · Answer

There are two possibilities to use if condition on HTML tag or templates     ngIf directive from CommonModule  on HTML tag   if-else

User · Answer

Syntax for ngIf Else   lt div  ngIf    condition  else elseBlock    gt Truthy condition lt  div gt   lt ng-template  elseBlock gt Falsy condition lt  ng-template gt      Using NgIf   Else  Then explicit syntax  To add then template we just have to bind it to a template explicitly    lt div  ngIf    condition  then thenBlock else elseBlock    gt       lt  div gt    lt ng-template  thenBlock gt Then template lt  ng-template gt   lt ng-template  elseBlock gt Else template lt  ng-template gt      Observables with NgIf and Async Pipe  For more details

User · Answer

In Angular 4  5 and 6  We can simply create a template reference variable  2  and link that to the else condition inside an  ngIf directive  The possible Syntaxes  1  are     lt  -- Only If condition -- gt   lt div  ngIf  condition  gt     lt  div gt   lt  -- or -- gt   lt ng-template  ngIf   condition  gt  lt div gt     lt  div gt  lt  ng-template gt     lt  -- If and else conditions -- gt   lt div  ngIf  condition  else elseBlock  gt     lt  div gt   lt  -- or -- gt   lt ng-template  elseBlock gt     lt  ng-template gt    lt  -- If-then-else -- gt   lt div  ngIf  condition  then thenBlock else elseBlock  gt  lt  div gt   lt ng-template  thenBlock gt     lt  ng-template gt   lt ng-template  elseBlock gt     lt  ng-template gt     lt  -- If and else conditions  storing condition value locally  -- gt   lt div  ngIf  condition as value  else elseBlock  gt   value   lt  div gt   lt ng-template  elseBlock gt     lt  ng-template gt    DEMO  https   stackblitz com edit angular-feumnt embed 1 amp file src app app component html  Sources     https   angular io api common NgIf syntax https   angular io guide template-syntax template-reference-variables--var-

User · Answer

Angular 4 and 5   using else     lt div  ngIf  isValid else other content  gt      content here      lt  div gt    lt ng-template  other content gt other content here    lt  ng-template gt    you can also use then else     lt div  ngIf  isValid then content else other content  gt here is ignored lt  div gt       lt ng-template  content gt content here    lt  ng-template gt   lt ng-template  other content gt other content here    lt  ng-template gt    or then alone     lt div  ngIf  isValid then content  gt  lt  div gt       lt ng-template  content gt content here    lt  ng-template gt    Demo    Plunker  Details    lt ng-template gt   is Angular   s own implementation of the  lt template gt  tag  which is according to MDN        The HTML  lt template gt  element is a mechanism for holding client-side   content that is not to be rendered when a page is loaded but may   subsequently be instantiated during runtime using JavaScript

User · Answer

ng-template   lt ng-template  ngIf   condition1   ngIfElse   template2  gt               lt  ng-template gt     lt ng-template  template2 gt                lt  ng-template gt

User · Answer

ngif expression resulting value won   t just be the boolean true or false  if the expression is just a object  it still evaluate it as truthiness   if the object is undefined  or non-exist  then ngif will evaluate it as falseness   common use is if an object loaded  exist  then display the content of this object  otherwise display  loading              lt div  ngIf   object  gt       Still loading              lt  div gt    lt div  ngIf  object  gt        lt  -- the content of this object -- gt              object info  object id  object name     etc    lt  div gt    another example       things      car   Honda    shoes   Nike    shirt   Tom Ford    watch   Timex         lt div  ngIf  things car  else noCar  gt    Nice car    lt  div gt    lt ng-template  noCar gt     Call a Uber   lt  ng-template gt     lt  -- Nice car   -- gt    anthoer example    lt div  ngIf  things car  let car  gt     Nice    car       lt  div gt   lt  -- Nice Honda  -- gt    ngif template  ngif angular 4

User · Answer

In Angular 4 0 if  else syntax is quite similar to conditional operators in  Java   In Java you use to  condition stmnt1 stmnt2    In  Angular 4 0 you use  ngIf  condition then stmnt1 else stmnt2

User · Answer

Here s some nice and clean syntax on Angular s NgIf and using the else statement  In short  you will declare an ElementRef on an element and then reference it in the else block   lt div  ngIf  quot isLoggedIn  else loggedOut quot  gt     Welcome back  friend   lt  div gt    lt ng-template  loggedOut gt    Please friend  login   lt  ng-template gt   I ve taken this example from NgIf  Else  Then which I found to be really well explained  It also demonstrates using the  lt ng-template gt  syntax   lt ng-template  ngIf   quot isLoggedIn quot   ngIfElse   quot loggedOut quot  gt     lt div gt      Welcome back  friend     lt  div gt   lt  ng-template gt    lt ng-template  loggedOut gt     lt div gt      Please friend  login     lt  div gt   lt  ng-template gt   And also using  lt ng-container gt  if that s what you re after   lt ng-container    ngIf  quot isLoggedIn  then loggedIn  else loggedOut quot  gt   lt  ng-container gt    lt ng-template  loggedIn gt     lt div gt      Welcome back  friend     lt  div gt   lt  ng-template gt   lt ng-template  loggedOut gt     lt div gt      Please friend  login     lt  div gt   lt  ng-template gt   Source is taken from here on Angular s NgIf and Else syntax  I hope this helped  Enjoy

User · Answer

In Angular 4 x x You can use ngIf in four way to achieve simple if else procedure    Just Use If   lt div  ngIf  isValid  gt      If isValid is true  lt  div gt   Using If with Else  Please notice to templateName    lt div  ngIf  isValid  else templateName  gt      If isValid is true  lt  div gt    lt ng-template  templateName gt      If isValid is false  lt  ng-template gt   Using If with Then  Please notice to templateName    lt div  ngIf  isValid  then templateName  gt      Here is never showing  lt  div gt    lt ng-template  templateName gt      If isValid is true  lt  ng-template gt   Using If with Then and Else   lt div  ngIf  isValid  then thenTemplateName else elseTemplateName  gt      Here is never showing  lt  div gt    lt ng-template  thenTemplateName gt      If isValid is true  lt  ng-template gt    lt ng-template  elseTemplateName gt      If isValid is false  lt  ng-template gt        Tip  ngIf evaluates the expression and then renders the then or else   template in its place when expression is truthy or falsy respectively    Typically the          then template is the inline template of ngIf unless bound to a different value    else template is blank unless it is bound

User · Answer

For Angular 9 8   Source Link with Examples      export class AppComponent         isDone   true          1   ngIf       lt div  ngIf  isDone  gt        It s Done       lt  div gt        lt  -- Negation operator-- gt       lt div  ngIf   isDone  gt        It s Not Done       lt  div gt    2   ngIf and Else       lt ng-container  ngIf  isDone  else elseNotDone  gt        It s Done       lt  ng-container gt        lt ng-template  elseNotDone gt        It s Not Done       lt  ng-template gt    3   ngIf  Then and Else       lt ng-container  ngIf  isDone   then iAmDone  else iAmNotDone  gt       lt  ng-container gt        lt ng-template  iAmDone gt        It s Done       lt  ng-template gt        lt ng-template  iAmNotDone gt        It s Not Done       lt  ng-template gt

[angular] How to use *ngIf else?

Examples related to angular

Examples related to if-statement

Examples related to angular-template