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

Using array.prototype.some inside ngIf

I am developing an angular app using the 8th version. Inside the ngIf expression, I want to check something existanse inside array. So I have written the expression below: *ngIf="questionniare.factors.some(item => item.intensities.length > 0)" But…
ConductedClever
  • 4,175
  • 2
  • 35
  • 69
9
votes
3 answers

How to write *ngIf for input placeholder in Angular2?

I have a template {{text}} I also have an array myWords myWords = ['orange', 'blue', 'green']; How could I insert these words like a…
Anna F
  • 1,583
  • 4
  • 22
  • 42
8
votes
3 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,873
  • 2
  • 15
  • 34
8
votes
4 answers

How to get element after displaying it using *ngIf?

I'm facing this issue frequently. I have an element as shown
by default, isShown = false; and by clicking an element, I'm making isShown = true; Now, in the same click callback function If I try to get…
Mr_Perfect
  • 8,254
  • 11
  • 35
  • 62
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
2 answers

Angular 2, using ngClass with conditionals in ngFor

I have ngFor loop that displays data, and based on if something is true or false in that loop, how can I change css? What I tried, does not work for me. HTML
Boris
  • 602
  • 2
  • 8
  • 29
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
  • 26,167
  • 33
  • 120
  • 197
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…
8
votes
2 answers

AngularJS ng-if directive briefly renders even when condition is false before removing element

In the below template, I would expect the script tag to never render, and the alert script to never execute. However it does.
Should not appear
This is causing us huge…
WearyMonkey
  • 2,519
  • 1
  • 24
  • 22
7
votes
1 answer

Why does *ngIF always evaluate to true in my Angular app?

I define Todo as follows: export class Todo { id: number; title: string; complete: boolean = false; editMode: boolean = false; } I have the following data service: getAllTodos(): Observable> { return…
Nick Hodges
  • 16,902
  • 11
  • 68
  • 130
7
votes
1 answer

Getting error with ngIf in Angular

I'm using angular and I want to display data from a variable which is in json form .I'm able to do it for *ngfor but also I want to put a condition where it checks whether msg.who=="Bot".I'm doing that using :
alia
  • 459
  • 4
  • 16
7
votes
2 answers

Angular2 - form in Edit / View mode

I'm working on my first angular2 application, I need to implement a form that allows edit and view mode. In view mode all the textbox items must di enabled , otherwise when I'm in view mode I want to show simple plain text ( like span element…
DarioN1
  • 2,460
  • 7
  • 32
  • 67
7
votes
2 answers

angular2 toggle icons inside ngFor

Can some one please let me know how to toggle icons while doing ngFor? Problem Statement: I'm using *ngFor to loop through an array and display category names. On click of day I need to open an accordian and show category details (I can do…
Pratap A.K
  • 4,337
  • 11
  • 42
  • 79
7
votes
1 answer

Test freezes when expect(result).toBe(null) fails test. (Angular 2, Jasmine)

I have a test that checks if part DOM element has been removed by an ngIf. When I check the DOM using: fixture.debugElement.query(By.css(".button-area")) the result is either null or a DOM element. If the result is null, then the following test…
ed-tester
  • 1,596
  • 4
  • 17
  • 24
7
votes
1 answer

make an element with ng-if start hidden (prevent it from showing during page load)

When i want to make something start as hidden with ng-show you can just add class="ng-hide" so the css will hide the element beforehand. This way an element won't be shown when the page is still loading I want to do the same thing using ng-if but i…
valepu
  • 3,136
  • 7
  • 36
  • 67