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

How use setTimeout for *ngIf in angular 10 for the ionic spinner

I'll have an ionic loading indicator that I'll want to show after 2 seconds of loading if the application still loading data from a server else don't show it. This is the html of the spinner.
Maarten Heideman
  • 545
  • 1
  • 9
  • 18
2
votes
1 answer

Does .includes() run during a change detection loop if the variable associated with it does not change? / Alternative to .includes()

I have a variable user_roles in my component file which gets initialized by an API on ngInit() and does not change after that. this.service.getUserRoles().subscribe( data => { this.user_roles = data; } ) user_roles is an…
2
votes
2 answers

How to display a h2 once using *ngFor and *ngIf

I have an array of words consisting of 2, 3, 4, 5 and so on letter words. im using an ng-For to iterate through the array and ng-if to display the words according to the amount of letters but i cant seem to get a title in to separate them expected…
Peter Snee
  • 15
  • 3
2
votes
1 answer

Angular ngIf: Identifier 'length' is not defined

My component has the property transfers$ that is an observable that can comes with an array or an object that contains the error message. I can only input [items] when transfers$ is Transfer[]. But even using condition
2
votes
3 answers

Angular Run *ngFor on particular Indexes Defined in Array

I am using a *ngFor loop but I only want the loop to run on particular indexes defined in an array (i.e. indexArray = [454,640]). If I try this, and the indexArray has two or more elements, it does not work. But If the array has only one element…
Sanchit Kumar
  • 45
  • 1
  • 8
2
votes
2 answers

How to use *ngIf on own selector of a component?

I have a component that I want to only show if one of its properties is set. So I thought about doing something like this in :
...
The thing is the…
Gaetitan
  • 284
  • 1
  • 6
  • 16
2
votes
1 answer

Using two variable in *ngIf

{{day | titlecase }}
Mustafa.psd
  • 27
  • 2
  • 9
2
votes
2 answers

Element still defined even though *ngIf is false Jasmine unit testing Angular

I'm completely new to unit testing, so I may just be doing everything wrong here. I'm using *ngIf to display a data grid from DevExpress once my GET request completes, and I'm trying to verify with the Jasmine test that it only is displayed once my…
CaldJoy
  • 23
  • 3
2
votes
2 answers

Undefined and Null in *NgIf

Are null, undefined and "" value treated similarly by *Ngif? For example, is this: *ngIf = "foo == null" Treated the same as: *ngIf = "foo == undefined" If not, is there a simpler way to use *ngIf to not show properties with the value…
2
votes
3 answers

Angular custom clickaway listener is triggered if a child component is removed using *ngIf

I have a clickaway listener as a directive that uses @HostListener put on App.component.ts @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], }) export class AppComponent { …
2
votes
1 answer

*matCellDef, *matHeaderCellDef and *ngIf in the same container

I'm trying to show a part of a row (which are buttons) of my table based on some boolean value but it only seemed to work if I put it on the button level. I've this code:
user8678484
2
votes
1 answer

Angular Difference between ngIf and ng-if

I am wondering what the difference between ngIf and ng-if is. In some sources I have seen ngIf used and in some sources ng-if used. I know ngIf vs *ngIf. That is not my question so do not get confused with that question. The dash is what I do not…
George Xavier
  • 191
  • 2
  • 12
2
votes
1 answer

How to conditionally set required attribute in Angular 7

I want to apply required on certain conditions. I used the [required]= "condition" but didn't work Here I want to apply required attribute when outlookName.outlookActionName==='Assigned' where outlook name is a dropdown and assigned is one of the…
radsin
  • 65
  • 2
  • 11
2
votes
1 answer

How to stop rendering of a certain section of code by using js/ts exactly like what happen when we use *ngIf in angular

We can comment or use css (display:none) to hide a certain part of the html code. But the code is actually available in the developers tools. How do we make use of the features of js or ts to stop rendering these part of the html like we make use of…
Sandy B
  • 113
  • 1
  • 15
2
votes
1 answer

Angular *ngIf="data$ async as data && data.payload; else noContent"

I want to conditionally show a block only if it contains data, otherwise I will show a noContent block. the data is fetched from the server. {{data.payload |…