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.
1,213
questions
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&...
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 ...
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 ...
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'
|...
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="...
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-...
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 ...
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":
...
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 ...
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 ...
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
&...
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 ...
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
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-...
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=&...
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">
<...
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 ...
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-...