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
20
votes
3 answers

AngularJS ng-if and scopes

I am trying to understand ng-if and scopes. As I am aware, ng-if creates a new child scope. Here is my issue: View
be-codified
  • 5,704
  • 18
  • 41
  • 65
19
votes
5 answers

Angular 2 conditional ngFor

I'm trying to clean up my template code. I have the following:
  • {{a.firstname}}

    {{a.lastname}}

7ball
  • 2,183
  • 4
  • 26
  • 61
18
votes
2 answers

Event to fire when an angular *ngIf statement evaluates in template

If I have the following:

{{user.name}}

Is there a way I can execute code when the div above finally appears on screen?
Sammy
  • 3,395
  • 7
  • 49
  • 95
17
votes
3 answers

Focus an element after it appears via ngIf

I have a button that, when clicked, is replaced with an input field and a confirmation button, then when input is finished it's replaced with the original button again. When that happens, I want it to focus the original button after it appears…
John Montgomery
  • 6,739
  • 9
  • 52
  • 68
17
votes
1 answer

quick leave and enter cause multiple element in angular ng-if animation

there is a ng-if animation example in this doc:https://docs.angularjs.org/api/ng/directive/ngIf if you clicking the checkbox quickly and repeatedly,you will find more than one element will be displayed,I don't know how to avoid it.
fenyiwudian
  • 470
  • 3
  • 12
17
votes
8 answers

ng-if, not equal to?

I have a simple ng-reapt that displays a list of values.. On some of the outputs, i have a couple of ng-if to show/hide DIVs. HTML:

{{ details.Name }}

{{ details.DOB }}

16
votes
4 answers

Is there elseIf in Angular 4

I have a number of statements First Second Third Multiple conditions in above statement can be true. But what i…
Ankit Raonka
  • 6,429
  • 10
  • 35
  • 54
15
votes
2 answers

Angular ngIf formGroup

I have a form on Angular that allows to display an input according to the value selected in a drop-down list. Here is an example of my code: (If two is selected an input appears) https://stackblitz.com/edit/angular-fqkfyx If I leave the [formGroup]…
Valentin
  • 405
  • 2
  • 6
  • 17
15
votes
2 answers

How do I negate the parameter for AngularJS ng-if directive?

Quick Example: There is a routed parameter (/Home/:isLoggedIn) that equates to true or false. (/Demo/#/Home/false) and a controller property this.loggedIn = this.routeParams.loggedIn; I have a view (Home.html) that has two elements, each with an…
beauXjames
  • 8,222
  • 3
  • 49
  • 66
14
votes
6 answers

Best way to show error messages for angular reactive forms, one formcontrol multiple validation errors?

I am showing reactive form error messages as per the suggested approach of angular angular form validation error example. html code of showing error on the page:
vinit tyagi
  • 713
  • 2
  • 8
  • 11
14
votes
1 answer

Angularjs: how to close ng-if in comment block?

visible
is pretty easy, but since ngIf can be used even in comments, what would be the closing
for comment block? Tried, w/o luck: .... Thanks.
Aleksandr Makov
  • 2,820
  • 3
  • 37
  • 62
14
votes
3 answers

Model does not update within ng-if

I've got a strange behavior in an angular application and I don't know if that's a bug or a known limitation: 'use strict'; var ctrl = function ($scope) { $scope.foo = false; };
stofl
  • 2,950
  • 6
  • 35
  • 48
13
votes
3 answers

Different between *ngIf vs [ngSwitch] in Angular 2+

What are the differences between [ngSwitch] and a bunch of *ngIfs. Any performance factors we should be concerned about? *ngIf
Keep calm and pretend it's not Monday.
...
Manoj Shrestha
  • 4,246
  • 5
  • 47
  • 67
13
votes
3 answers

AngularJS - input autofocus with ng-if not working

When I surround my input with ng-if, after hide and show the autofocus attribute does not take effect: Here is the code: