Stack Overflow
Stack Overflow

Questions tagged [angular-ng-if]

'ngIf' is 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 documentation:

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

1223 questions
635
votes
18 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
  • 12,022
  • 11
  • 49
  • 83
196
votes
13 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
108
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
  • 9,396
  • 9
  • 58
  • 103
72
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…
    HarriLehtisaari
    • 881
    • 2
    • 7
    • 6
    68
    votes
    2 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,668
    • 3
    • 18
    • 32
    58
    votes
    6 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
    • 930
    • 1
    • 8
    • 10
    45
    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.
    • 3,997
    • 4
    • 26
    • 33
    43
    votes
    5 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
    • 607
    • 1
    • 5
    • 13
    39
    votes
    4 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
    • 4,415
    • 12
    • 38
    • 56
    35
    votes
    5 answers

    *ngIf not working as expected with observable

    So I have these 2 buttons: Login Logout And the logout button works…
    RiesvGeffen
    • 1,539
    • 2
    • 11
    • 29
    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,635
    • 4
    • 56
    • 69
    32
    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
    • 798
    • 1
    • 9
    • 15
    31
    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
    • 189,012
    • 314
    • 712
    • 1,047
    30
    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:
    22
    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
    • 223
    • 1
    • 2
    • 6
    1
    2 3
    …
    81 82