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
11
votes
1 answer

Applying ng-class based on value

I have a simple ng-repeat that displays a list of scores and a value of either Positive or Negative. What i am trying to do is when the value is Negative, display a red background CSS class, and when Positive, display a green CSS class. However, for…
11
votes
1 answer

Angular ng-if inside option element and ng-repeat not working

I have select element which should list available currencies. Default currency should have prefix "Default" before its name. For some reason, that prefix is showing for all currencies in the list. Test HTML:
NenadPavlov
  • 207
  • 1
  • 2
  • 10
10
votes
3 answers

*ngIf with focus directive

In my app, I tried to place a button that shows/hides an input field with a boolean component property. If the button shows the input, focus should be set on the input. But it seems not to work. If I remove the *ngIf the focus directive works…
Max Solid
  • 973
  • 2
  • 16
  • 29
10
votes
4 answers

Angular ng-if change span text

I have this JSON file that I am taking objects as products from. When displaying the sizes of the products I want to change a span from "sizes:" to "kids:" when the json object has "kids": "1".
user1780729
  • 500
  • 1
  • 6
  • 21
10
votes
3 answers

How to use ng-if with table to display td based on the condition

With reference to the earlier post on ng-if within DIV for reference the link given here :: Ng-If within DIV , however when i tried the same with ng-if inside table with ng-repeat on td it doesn't seems to work well. Correct me if I'm wrong I made 2…
Arun
  • 960
  • 5
  • 16
  • 32
9
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
  • 3,064
  • 3
  • 36
  • 53
9
votes
2 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
  • 5,798
  • 8
  • 45
  • 58
9
votes
2 answers

Angular2: How do you run 2 animations in parallel?

I have a container that expands/shrinks. There is an element inside that container that should fade in when the container expands and fade out when the container shrinks. My Problem When the container expands, the animation of both elements…
AJ X.
  • 2,470
  • 1
  • 18
  • 28
8
votes
2 answers

How to set condition of a NaN value to show/hide a view using ngIf | angular 6

I want to hide a label when the value is NAN using *ngIf* but it's not working. The marked label is the default value of a variable, once the input is filled the value will be a number I want to show the label only when the value is not NAN What…
Ali Al Amine
  • 1,114
  • 1
  • 18
  • 38
8
votes
5 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
  • 283
  • 2
  • 4
  • 10
8
votes
2 answers

error in getting value from input that have ngIf directive

I get an exception Error TypeError and Error Context when the submit button is clicked. If I will delete the ngIf directive It will work as excepted, The Full StackTrace: PlayerNameFormComponent.html:8 ERROR TypeError: Cannot read property 'value'…
Ron Badur
  • 1,543
  • 2
  • 10
  • 25
8
votes
1 answer

Why use ViewContainerRef over *ngif?

I could just do But every document on inserting component in dom dynamically is based on ViewContainerRef. I like what it does. But what makes it so special over…
8
votes
3 answers

checking string value in ng-if statement

I would like to check the value of the property of an object and would like to check the data of string to compare.
This text belongs in a table.
So far all the divs appear with the text…
bluePearl
  • 1,031
  • 3
  • 16
  • 35
8
votes
2 answers

Angular 2 Can't bind to 'ngif' since it isn't a known property

I am experimenting with Angular 2. I have a working test app with two components. It all works, but it crashes when I try to use *ngif There are already a lot of questions about this problem but most of the answers point to importing "BrowserModule"…
Kokodoko
  • 19,176
  • 21
  • 88
  • 153
8
votes
2 answers

check if items inside ng-repeat already contains value

I have JSON string of question and answer which binds in ng-repeat , now problem is i wants to show question once and all multiple answer within ng-repeat . this are my data. {Answer:"White",AnswerID:967,answer_type:"RADIO",fullquestion:"Your…
1 2
3
72 73