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.

Filter by
Sorted by
Tagged with
0 votes
0 answers
28 views

Two way Binding in Some Angular Component is not working

In my angular project, I have many components but in some components, two-way binding is not working, It is always getting an error message for example: Error: src/app/student/student.component.html:8:...
0 votes
0 answers
14 views

Changing the button label depending on radio buttons *ngif in angular 11

I have 2 radio buttons and a regular button. I need to change the normal button label depending on the radio selection. If the user selects the first radio I want the label will be: "Continue&...
  • 513
0 votes
0 answers
60 views

in angular 15 submit button not enabled with captcha validation

When I click on the submit button in the login form in Angular 15, the submit button is not enabled with username, password and CAPTCHA validation. If I remove Google reCAPTCHA validation, then this ...
  • 1
0 votes
1 answer
31 views

ngIf for display different table details

I have a table that presents data - but I want to display a "table has no data" message within the table if the data is empty. Here is the code for the table: <table id="productTable&...
1 vote
1 answer
37 views

ngIf condition on mat-option is not getting executed

I have 2 mat-options. 1 for loading items from backend and another to display None. <mat-form-field id="Dropdown"> <mat-select id="ddlabel" placeholder="{{'...
0 votes
2 answers
118 views

ngIf causes error: Conditional Expression requires all 3 expressions at the end of expression

I am attempting to write form control specific validation error messages in a form group. I have found several tutorials and examples online (such as this one) outlining a seemingly simple *ngIf div ...
  • 1,284
0 votes
1 answer
47 views

How can I hide the parent elements when there is no child element

For example: <ul *ngIf="hasAnyPermission(['A:READ', 'B:READ', ...])"> <li *ngIf="hayPermission('A:READ')"> a </li> <li *ngIf="hasPermission('B:...
0 votes
0 answers
14 views

how can i make a shortcut in *ngIf if i have alot of condition?

basically, i have an example of code like this: <div *ngIf="key === 'key1' || key === 'key2' || key === 'key3' || key === 'key4' || key === 'key5' || key === 'key6' || key === 'key7' |...
  • 957
0 votes
1 answer
93 views

*ngIf not working in child component in Angular 9

ngIf is not working in child component. There are two sibling components (Release and Assets) and both have a shared component (version-actions), and both the sibling components are essentially inside ...
0 votes
0 answers
38 views

Angular ngIf statement

This is a component that reuse in a form for registering item. here i have some types. like for a phone number there are work, home, mobile types. value for 'data' are taken from service file. type....
0 votes
1 answer
28 views

Dsiplay MatChips only if the observable has less then nine entries

I have a mat-chip-list with an ngFor and the matchips shall only be displayed if the array of my observable has less then nine entries. This is my HTML: <mat-chip-list *ngIf="...
user avatar
1 vote
2 answers
33 views

Data not shown correctly when using custom pure pipe together with boolean in ngIf statement

I am doing a webproject where i need friendship/follow functionality. I also have two roles admins and (regular) users. Users can follow other users. Admins can not follow users. A user can follow ...
0 votes
2 answers
52 views

Check if currentRoute starts with some text(something/something/*...) in Angular

I want to stop loader from loading from few screens and therefore I applied ngIf at routes where loader isn't needed. Here is the code for app.component.ts : <router-outlet> <app-spinner>...
0 votes
1 answer
39 views

How to hide/show a button in a tablerow depending on the data in that row in Angular?

I am trying to make an user table in which all users from my mongoDb are shown. The user can follow or unfollow other users by clicking on a button inside the row of the table. If the current user ...
0 votes
3 answers
82 views

Angular, ng-templates with if condition

I want to call for two separate templates according to role id changes. I can get my role which role as ngIf="rolet.role.id== adminRoleId two templates are, <ng-template #role ></ng-...
  • 29
0 votes
1 answer
65 views

how to index with edit button with exact value and then save on index?

I got an issue when I click on edit button. it will edit on all selected data. I need to edit on particular index value but I didn't get that value. selectedVtuCommands is an array of strings that are ...
0 votes
1 answer
18 views

*ngIf directive in Angular does not refresh the template when the condition is not met

I have an angular mat-table where I show a calendar with data and I want to show all the days of the month or only one of the 2 fortnights, so I have one variables to set the type of vision of my ...
  • 1,215
2 votes
1 answer
26 views

AngularJS ng-if is not working while the condition is true

I'm using angular.min.js 1.8.2 for Coursera AngularJS Single Page Application. I created an itemAdder to add a shopping list by users, the items will show in showList. Once you bought the items, you ...
1 vote
0 answers
86 views

*ngIf and optional chaining

I am currently refactoring some old code and thus dealing with many redundant conditional checks. Here is a short example: <div *ngIf="user" title="{{user?.name}}"> <...
0 votes
1 answer
64 views

angular - ngIf collection of conditions as class

let say that i have 10 <p> elements, and i want to add for them *ngIf condition like this: `*ngIf="myconditions"` is there any way to create something like this "class": ...
  • 1
0 votes
2 answers
67 views

Angular: Using directives with *ngIf

Is it somehow possible to say if i >= 2 then [cdkDropListConnectedTo]="[one, two]", otherwise [cdkDropListConnectedTo]="[three, four]"? *ngIf didn't work for me. I also searched ...
  • 129
0 votes
1 answer
229 views

Property 'x' does not exist on type 'y' in Angular ngIf

I am creating an Angular page to display the results of football matches and would like a warning message to be displayed when there are no matches. I used an ngIf to check if the array containing all ...
0 votes
1 answer
39 views

Changing value of mat-option based off a conditonal in *ngIf

I have two options for values when it comes to my mat-option tempTime: TempOptions[] = [ { value: 100, viewValue: '100 points' }, { value: 200, viewValue: '200 points' } ]; ...
0 votes
0 answers
22 views

How to make the different "mat-option" independent of each other

I'm currently facing a problem with a Angular Component : Mat-option. I would like to make each of my mat-option independent from the other. Im actually using a component Template which is called each ...
1 vote
1 answer
65 views

How can I make var in *ngIf?

I have situation: <test-component *ngIf="(items | somePipe).length" [items]="items | somePipe" ></test-component> How can I make var from (items | ...
0 votes
2 answers
29 views

Data not displaying in the HTML file while using the api?

I am working on a shopping cart application. I'm facing issue while displaying the user selected products in the cart.component.html, as the data is not rendering. DOM is being created every time but ...
  • 1
0 votes
1 answer
219 views

Angular 13 tree Ng For Loop Not working Properly

Angular tree Loop is not working, here's the sample of code I'm trying to use. Do I need to write anything else in my code, so that it will work? Please help me on this one. Thank you. My HTML Code &...
  • 49
0 votes
0 answers
186 views

Angular 13 Ng For loop is not working properly

I'm New to Angular. i have an issue while looping in details and summary tab . i have attached my codes and expected result below. please help me out to solve this issue stackblitz issue produced in ...
  • 23
0 votes
1 answer
66 views

Weird behavior of BehaviorSubject, async pipe, and *ngIf combination: ngOnChanges receives the change that theoretically cannot be possible

I have two components - Parent component which fetches the data from the server, and child component which is displaying fetched entries as a list - but only if the list is not null or empty. My ...
0 votes
1 answer
74 views

*NgIf block in Angular does not toggle with two event functions

I need to show and hidden(perfectly - totally clear to original state) block with images with two buttons. For this I tried to make this job with NgIf block and boolean variable, but it works only ...
1 vote
1 answer
59 views

How to use ngIf inside the ngFor correctly. (Angular)

<label for="bank_id">Bank</label> <select class="browser-default custom-select custom-select-sx col-md-12 mb-auto" (change)="selectedBank($event)"> ...
0 votes
1 answer
54 views

Angular. NgIf async boolean with ordinary boolean doesn't work

I have this code (selectCurrentErrorCode$ | async) || data.isError ? 'error' : 'no error' sometimes I need check async Error from state (Observable), and sometimes I want to pass the error directly (...
0 votes
0 answers
50 views

Angular - *ngIf on my buttons doesn't work on boolean changing value dynamically [duplicate]

I'll try to make it short. I assign a value (true or false) to a boolean depending of the size of my component. html (I have two buttons with *ngIf) : <section #carouselElement> <button *...
-4 votes
1 answer
77 views

Angular confitional ngIf to hide a child component

I have a child component being called based on the boolean returned from showSidebar() <ng-container *ngIf="showSidebar()"> <app-sidebar></app-sidebar> </ng-...
  • 1,616
-1 votes
1 answer
295 views

How to make columns unshown(hidden) conditionally in p-table (primeng) and *ngIf?

I have the p-table and this is what the structure looks like: ... <p-tabPanel header="A"> <a *ngIf="importedNewCustomer.length; else ErrorPage"> <p-...
  • 33
0 votes
1 answer
345 views

How to skip iteration in *ngFor loop without drawing in the view an empty item when *ngIf returns false

Im trying to draw in a grid a set of items that meet a condition, but an iteration does not meet the condition, and empty grid item is still drawn in the view. How do I stop the *ngFor (or whatever is ...
0 votes
2 answers
113 views

*ngIf & Object.keys()

Why I can't use Object.keys() method inside an *ngIf directive of Angular? WebStorm arises Unresolved variable or type Object error, highlighting the "Object" word. Example: <span *ngIf=&...
  • 97
0 votes
0 answers
99 views

Show div if it's jpeg images and show iFrame if it's PDF files Angular

In the application on the deposit management screen, I show the user in a div the case receipt was attached in jpg or jpeg format. But if this user attaches the pdf receipt, the div is not showing ...
0 votes
2 answers
139 views

Cannot do ng for loop binding in angular 13

I would like to do an angular 13 looping to split data to one column when duplicate entries came from database now I got like this I Want like this <table class="custom-table"> <...
  • 49
0 votes
1 answer
208 views

ion-progress-bar doesn't show correctly when inside a (#loading) ng-template

this is my first question. I've done a #loading template with an ion progress bar inside, but it doesn't show on the footer of the page (nor in the header if i try it too). It shows next to header. &...
0 votes
1 answer
188 views

ngIF with interpolation

guys a simple code for my understanding of how this directive work. I have a ts file with two functions: chnageUserCreatedStatus() { this.userCreatedStatus = 'User is created'; ...
0 votes
1 answer
629 views

Angular api response data not displaying in table

I am new to angular so following Deborah Kurata's angular getting started and reactive forms courses. In the course code there is a product-list component which in the template has a table and in the ...
  • 339
0 votes
1 answer
305 views

Check a value in *ngIf which is passed from component

I am passing a value from component like this <component1 [height]="900"></component1> of course value declared in .ts file as @Input() height:number=0; binding to div like ...
0 votes
1 answer
185 views

Angular - Display different dropdown values based on condition

I am displaying data value as dropdown if below condition in html is met. I would like to add another condition where on change of another dropdown which contains companies name I show data1value. For ...
1 vote
1 answer
117 views

Error when using ngIf on div in a submodule in Angular

I have an app that is using mostly components, but I created my own submodule, named ProjectsModule. This ProjectsModule is using its own router and so on, but the issue is when displaying a specific ...
1 vote
1 answer
553 views

ngIf still renders div on false condition

I am trying to show a series of material cards based on a flag in my data. If the flag is falsy, I'm still getting an empty div (and thus extra space) injected into the DOM. Assume I have an array of ...
1 vote
1 answer
327 views

How to use *ngIf in Angular to list items if length is not 0?

<h1>{{title}}</h1> <ul> <li *ngFor="let breed of data.message | keyvalue"> <a [routerLink]="['/picsofbreed']" [queryParams]="{breed: breed.key}...
1 vote
3 answers
72 views

How to use ngIf to choose diffrent selector in html in an angular app

I have a question about how to use ngIF in HTML code to choose different selector. I show my code as follow: in HTML Code: <a class="style" (click)=clickFunction() (keyup.Enter)=ke()> ...
0 votes
1 answer
146 views

angular ViewChild isnt working inside a ngIf statement

I am trying to show student data in a table according to a selected course in my app.componenet.html: <div class="column"> <app-courses-list #child></app-courses-list&...
-1 votes
1 answer
80 views

ngIf with multiple condition using OR operator not working [closed]

<ng-container *ngIf="(element.documentStatus === 'DELETED' || element.documentStatus === 'SUPERSEDED' || element.documentStatus === 'UNDER_QC_REVIEW')"> Hide </ng-...

1
2 3 4 5
25