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

Angular ! and odd even

this is the task: Your task is to create a simple Angular Component named TestComponent identified by the selector test-component The component must have an input property of type Array named inputData. If there is no input data (empty or missing)…
Jhon Hernández
  • 293
  • 5
  • 20
3
votes
1 answer

TypeScript error- This condition will always return 'false' since the types 'boolean' and 'string' have no overlap

I am adding ngIf condition in ng-container where if the condition satisfies then display the component The problem I am facing is I am getting error This condition will always return 'false' since the types 'boolean' and 'string' have no…
DON DAN
  • 57
  • 1
  • 1
  • 5
3
votes
2 answers

Angular *ngIf (rendering) problem after fetch data from API

I have problem with the *ngIf="" directive. When I fetch my data in my AppComponent and if I use *ngIf="", my Revolution Slider will not be shown. Without ngIf With ngIf My code looks soo Service.ts getAllPlaces(language, currency, holiday_type,…
3
votes
3 answers

Angular renders component first then removes another in ng-If

I've two component displayed one at a time using a ngif directive. The Points are The showFirst variable is initialized using…
Subhashis Pal
  • 139
  • 1
  • 11
3
votes
1 answer

Angular: ngif animation jumps! How to animate ngif element after previous element is removed from DOM?

Chances are I am going about this all wrong but is there a way to delay ngIf? I have elements in a parent component, when the element is clicked it fades out and is removed from the DOM with ngIf, as that element is removed, elements from the child…
felixo
  • 1,453
  • 6
  • 33
  • 60
3
votes
0 answers

mat-select not setting value when shown with *ngIf

I'm using a mat-select within a table (so each row has one) that will be shown when the row is selected for editing. The mat-select has an *ngIf on it to hide it when not in edit mode. It is also populated by a key/value map within the component. …
expenguin
  • 1,052
  • 2
  • 21
  • 42
3
votes
2 answers

How to handle undefined arrays in Angular for different templates?

I am working on a search screen for an application. I figure to have three outcomes in the results section. If the user has not attempted a search, then display nothing. If the user has attempted a search and the array is empty, then display "no…
michael
  • 787
  • 2
  • 6
  • 12
3
votes
2 answers

How to avoid triggering change detection in a component using the method in the view?

I have a array with filters: ["BOX_NAMES", "BATHROOMS", "CONFERENCE_HALLS"] and i show part of view when filter is active in *ngIf* directive like that: *ngIf="isFilterActive(Filters.CONFERENCE_HALLS)" isFilterActive function implementation: if…
3
votes
4 answers

ngIf not updating DOM

I have a variable isLTEavailable in my ts file inside a function. When the function is called, based on the a condition, isLTEavailable's value changes and is logged correctly, but for some reason, it is not being updated in the DOM. Here's my ngif…
Ujjwal Sharma
  • 96
  • 2
  • 11
3
votes
2 answers

flashing content of *ngIf using an Observable

I develop an Angular app. I want to display some text when my app is not in production, otherwise nothing. I have the following code, where environment is an observable: bla bla text... The…
Olivvv
  • 1,140
  • 1
  • 13
  • 37
3
votes
2 answers

Load dynamic component within *ngIf - createComponent is undefined

I'm trying to load a dynamic component into my view when a user clicks the button which looks like the following:
expenguin
  • 1,052
  • 2
  • 21
  • 42
3
votes
3 answers

Angular: Show hide a row based on a value in the previous row

I am trying to hide and show based on the value in the row in my angular 7 application. In the below example, there are three rows with the following headers. Component public ColumnNames: string[] = ['Legal Class Name', 'Last Edited' , 'Legal…
Tom
  • 8,175
  • 41
  • 136
  • 267
3
votes
2 answers

how to hide a component if all sub-components are hidden ngIf

For example consider the code:
Parent
Child0
I want Parent division's ngIf to be…
user8401765
3
votes
2 answers

Ngif for empty string validation angular 5

I'm struggling to validate an empty string retrieved from a server It's usually pretty straight forward it's just not working
AWGAL
  • 157
  • 1
  • 2
  • 12
3
votes
5 answers

How to point other components in the else part of *ngIf

With extension of my previous question, here are another scenario where I need to use a template in else part of *ngIf Here is my current code where I am using loading spinner on each page until API response returns
xkeshav
  • 53,360
  • 44
  • 177
  • 245