Stack Overflow
Stack Overflow

Questions tagged [angular-ng-if]

An Angular core directive that toggles the presence of the targeted element in the DOM. Do not use this tag for the ng-if directive in the older AngularJS version.

ngIf is an Angular directive that alters the targeted element.

From the docs:

Conditionally includes a template based on the value of an expression.

1085 questions
532
votes
16 answers

*ngIf and *ngFor on same element causing error

I'm having a problem with trying to use Angular's *ngFor and *ngIf on the same element. When trying to loop through the collection in the *ngFor, the collection is seen as null and consequently fails when trying to access its properties in the…
garethdn
  • 10,723
  • 11
  • 48
  • 75
136
votes
9 answers

*ngIf else if in template

How would I have multiple cases in an *ngIf statement? I'm used to Vue or Angular 1 with having an if, else if, and else, but it seems like Angular 4 only has a true (if) and false (else) condition. According to the documentation, I can only…
user358089
100
votes
4 answers

Angular ng-if="" with multiple arguments

I am trying to get started on angular development. And after reviewing the documentation some questions persist. How do i best write a ng-if with multiple arguments corresponding to if( a && b) or if( a || b )
David Karlsson
  • 7,621
  • 8
  • 49
  • 94
66
votes
6 answers

Angular ng-if not true

Why doesn't this work.
  • Feels a bit illogical since
  • works just fine. 'area' is defined in scope as true/false Any workarounds for this? I would prefer not to use ng-show/ng-hide since both of them…
    user3289197
    • 821
    • 2
    • 7
    • 6
    44
    votes
    3 answers

    angular 4: *ngIf with multiple conditions

    I'm confused a bit. I need to hide block if result have one of several cases. But seems it not working correctly...

    Merge-pony
    • 1,272
    • 2
    • 13
    • 29
    39
    votes
    3 answers

    How to conditionally wrap a div around ng-content

    depending on the value of a (boolean) class variable I would like my ng-content to either be wrapped in a div or to not be wrapped in div (I.e. the div should not even be in the DOM) ... Whats the best way to go about this ? I have a Plunker that…
    Somo S.
    • 2,604
    • 3
    • 19
    • 31
    38
    votes
    3 answers

    Angular 4 default radio button checked by default

    I'm trying to mark as a default a radiobutton depending on the value I get from my object, it can be True or False. What could I do to mark as a default radiobutton depending on the option?
    Jotan
    • 527
    • 1
    • 4
    • 11
    35
    votes
    5 answers

    AngularJS watch DOM change

    I have one auto-carousel directive which iterates through the linked element's children. The children however are not yet loaded in the DOM, because their ng-ifs expressions have not been parsed yet. How can I make sure the parent directive knows…
    pilau
    • 6,329
    • 4
    • 52
    • 64
    33
    votes
    3 answers

    What is the difference between ng-if and *ng-if in angular2

    I'm trying to understand the difference between ng-if and *ng-if, but they look the same to me. Is there a difference that I should keep in mind choosing one over the other and when to use these directives?
    ShellZero
    • 3,377
    • 7
    • 33
    • 49
    30
    votes
    4 answers

    Angular *ngIf variable with async pipe multiple conditions

    There's quite good doc of using *ngIf in Angular: https://angular.io/api/common/NgIf But, is that possible to have *ngIf async variable and multiple checks on that? Something like:
    Vitaly
    • 580
    • 1
    • 4
    • 10
    29
    votes
    3 answers

    How to use filter in ng-if and variable?

    In this example, I use filter in the ng-repeat, but how do I use it in a variable and ng-if, something like: {{languages.length | filter: {available: true}}} and ng-if="languages.length == 0 | filter: {available: true}" See Fiddle. HTML
    Edward Tanguay
    • 176,854
    • 291
    • 683
    • 1,015
    23
    votes
    2 answers

    *ngIf not working as expected with observable

    So I have these 2 buttons: Login Logout And the logout button works…
    RiesvGeffen
    • 1,369
    • 1
    • 8
    • 25
    21
    votes
    3 answers

    Angular 2- using *ngIf with multiple conditions

    I'm unable to selectively display links on my nav-bar. Based on who logs in (user or admin), I want to change which link shows on my nav-bar. Below is the code for one such instance where the user/admin logs out. In navbar.component.html -
    Shakir Jameel
    • 213
    • 1
    • 2
    • 6
    20
    votes
    2 answers

    How to include an ng-template element without a condition in Angular 2

    I need an HTML fragment more than once in my Angular template. Instead of writing the HTML code multiple times, I decided to put it inside an ng-template element and use that element replicated in the code. For example: …
    user7346048
    • 650
    • 8
    • 15
    19
    votes
    5 answers

    Passing ngFor variable to an ngIf template

    How do I pass the current variable in an ngFor loop to ngIf, if it is using templates with then/else syntax? It appears that they pass through fine when used inline, but aren't accessible from a template, for example:
    1
    2 3
    …
    72 73