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

element is not rendering properly with *ngIf async pipe in unit test spec

What I'm trying to do is get the reference of a button in order to simulate a click event, my main problem is that the button is not rendering cause the component is not detecting the change of a list that should be populated by that time. Here is…
4
votes
3 answers

*ngIf with button, disabled or not disabled Angular 9

I have two drop downs that are parameters for a function that is called on the Retrieve button click. What I want to happen is when both drop downs do not have data selected, the Retrieve button is disabled. If both drop downs have data then I want…
JCA
  • 197
  • 2
  • 2
  • 16
4
votes
4 answers

NgIf and zero: Why is the template not being rendered?

I have the following observable on and Angular component: count$: Observable; this.count$ = this.getCount(); By using the following I get the value 0 (Zero); this.count$.subscribe(x => console.log(x)); On the template I have:
Miguel Moura
  • 36,732
  • 85
  • 259
  • 481
4
votes
3 answers

Is it possible to use Angular ngIf without removing element from the DOM?

I know some of you will cringe with this question because I know that what I'm asking about isn't best practice. However, I'm going to ask anyway and hope to keep the abuse to a minimum. ngIf removes elements from the DOM when the conditional…
Wayne F. Kaskie
  • 3,257
  • 5
  • 33
  • 43
4
votes
1 answer

ElementRef is undefined

I’m working in an angular 6 application. I have a textarea that I’d like to give focus to as soon as the page loads. I’m not able to do so. Here is what the page looks like:
4
votes
2 answers

Angular render one template or another on condition without copy/paste code

The issue works as follows. I have some code that actually works like this:
4
votes
1 answer

ngIf Expression has changed after it was checked

I will explain my problem with a simplified example since my code is quite lengthy. I want to display a certain div when either one of isFetching or isDownloading is true.
My div element is…
EDJ
  • 843
  • 3
  • 17
  • 37
4
votes
1 answer

How to use of dynamic local template variable inside [ngClass] and ngIf

I have the following HTML component in angular 4:
Rahul Uttarkar
  • 3,367
  • 3
  • 35
  • 40
4
votes
0 answers

How can I pass a context to the else branch of an *ngIf in Angular 4?

The following code is already a bit of an atrocity in terms of nested ng-this and ng-that tags, but it would be so much prettier if there were a way to skip the ngSwitch for an ngIf and just pass a context to the else branch…
yogibimbi
  • 588
  • 5
  • 17
4
votes
1 answer

Angular4: *ngIf in not hiding element, instead creating duplicate elements in Internet explorer 11

I am facing issue using *ngIf to show different types of chart based on some flag. Its working in chrome but in IE11. *ngIf contents are getting added to DOM when flag is true, not getting deleted if flag is false. Because of this each time I toggle…
4
votes
1 answer

Why is *ngIf not working when a variable is settled to 0?

I have 3 input fields with [(ngModel)] to 3 variables. Then I have a hidden button that only appears when all 3 variables have a value, using *ngIf. Check out the code:
Matias Diez
  • 1,237
  • 2
  • 17
  • 26
4
votes
1 answer

ngIf with viewchild

I'm new at angular2 and not professional. I have a parent-child component that I want when user click on a button the selector of child component show something. So it should be condition and also it is used from a child component. Here are my…
Amir Gh
  • 265
  • 1
  • 5
  • 20
4
votes
2 answers

Call function in *ngIf

I have this situation where I want to call a function to display the correct html mark up. Here is my current code:
  • loveprogramming
    • 538
    • 2
    • 5
    • 22