This should do what you want:
<div class="comeBack_up" *ngIf="(previous_info | json) != ({} | json)">
or shorter
<div class="comeBack_up" *ngIf="(previous_info | json) != '{}'">
Each {} creates a new instance and ==== comparison of different objects instances always results in false. When they are convert to strings === results to true
Plunker example
Answer from Günter Zöchbauer on Stack OverflowThis should do what you want:
<div class="comeBack_up" *ngIf="(previous_info | json) != ({} | json)">
or shorter
<div class="comeBack_up" *ngIf="(previous_info | json) != '{}'">
Each {} creates a new instance and ==== comparison of different objects instances always results in false. When they are convert to strings === results to true
Plunker example
From the above answeres, following did not work or less preferable:
(previous_info | json) != '{}'works only for{}empty case, not fornullorundefinedcaseObject.getOwnPropertyNames(previous_info).lengthalso did not work, asObjectis not accessible in the template- I would not like to create a dedicated variable
this.objectLength = Object.keys(this.previous_info).length !=0; I would not like to create a dedicated function
isEmptyObject(obj) { return (obj && (Object.keys(obj).length === 0)); }
Solution: keyvalue pipe along with ?. (safe navigation operator); and it seems simple.
It works well when previous_info = null or previous_info = undefined or previous_info = {} and treats as falsy value.
<div *ngIf="(previous_info | keyvalue)?.length">
keyvalue - Transforms Object or Map into an array of key value pairs.
?. - The Angular safe navigation operator (?.) is a fluent and convenient way to guard against null and undefined
DEMO: demo with angular 9, though it works for previous versions as well
Videos
You can use: Object.keys(card).length === 0
But make sure you use it from a method of the controller as the Object is not available in the view, like:
$scope.isObjectEmpty = function(card){
return Object.keys(card).length === 0;
}
Then you can call the function from the view:
ng-show="!isObjectEmpty(card)"
Use json filter and compare with '{}' string.
<div>
My object is {{ (myObject | json) == '{}' ? 'Empty' : 'Not Empty' }}
</div>
ng-show example:
<div ng-show="(myObject | json) != '{}'"></div>
You should use an AngularJs filter:
Javascript:
app.filter('isEmpty', [function() {
return function(object) {
return angular.equals({}, object);
}
}])
Html template:
<div ng-if="!(vm.testObject | isEmpty)">
Test Object is not empty
</div>
<div ng-if="vm.testObject | isEmpty">
Test Object is empty
</div>
Updated plunkr: http://plnkr.co/edit/J6H8VzUKnsNv1vSsRLfB?p=preview
Are you ok with moving the equality check to the ng-if?
<div ng-controller="TestController as vm">
<div ng-if="!equals({}, vm.testObject)">
Test Object is not empty
</div>
<div ng-if="equals({}, vm.testObject)">
Test Object is empty
</div>
</div>
Otherwise, provide a helper on the scope
app.controller('TestController', function() {
var vm = this;
vm.testObject = {};
vm.empty = function() {
return vm.testObject === {};
};
});
then
<div ng-controller="TestController as vm">
<div ng-if="!vm.empty()">
Test Object is not empty
</div>
<div ng-if="vm.empty()">
Test Object is empty
</div>
</div>
Or you could keep it simple by doing something like this:
alert(angular.equals({}, $scope.items));
In a private project a wrote this filter
angular.module('myApp')
.filter('isEmpty', function () {
var bar;
return function (obj) {
for (bar in obj) {
if (obj.hasOwnProperty(bar)) {
return false;
}
}
return true;
};
});
usage:
<p ng-hide="items | isEmpty">Some Content</p>
testing:
describe('Filter: isEmpty', function () {
// load the filter's module
beforeEach(module('myApp'));
// initialize a new instance of the filter before each test
var isEmpty;
beforeEach(inject(function ($filter) {
isEmpty = $filter('isEmpty');
}));
it('should return the input prefixed with "isEmpty filter:"', function () {
expect(isEmpty({})).toBe(true);
expect(isEmpty({foo: "bar"})).toBe(false);
});
});
regards.
Lets say we have a variable called x, as below:
var x;
following statement is valid,
x = 10;
x = "a";
x = 0;
x = undefined;
x = null;
1. Number:
x = 10;
if(x){
//True
}
and for x = undefined or x = 0 (be careful here)
if(x){
//False
}
2. String x = null , x = undefined or x = ""
if(x){
//False
}
3 Boolean x = false and x = undefined,
if(x){
//False
}
By keeping above in mind we can easily check, whether variable is empty, null, 0 or undefined in Angular js. Angular js doest provide separate API to check variable values emptiness.
if( myVariable )
{
//mayVariable is not :
//null
//undefined
//NaN
//empty string ("")
//0
//false
}
You have to ...
if (this.user && this.user.data && this.user.data.token) {
}
Always keep in mind that undefined and null are different, when you see undefined it means that a variable was declared but it holds no value in it and null is an actual assignment value. Also undefined is a type and null is an object. So..
if(!(this.user.data.token == null));
Should work for you, if you want to add some other conditions just and the operator || and type next condition.
If you're looking to check for undefined objects you can do something like
this.user.data.token != undefined && ...
and so on..
After you added to your question:
You define model as: model.items = data;
So, you empty model is: model = { items: [] }.
That's why it isn't empty. You need to test for model.items being empty.
If you need a tested way to tell that the object is empty, I'd recommend lodash.isEmpty(). You can use it for "any Array-like values such as arguments objects, arrays, buffers, strings, or jQuery-like collections".
https://lodash.com/docs/4.15.0#isEmpty
Since I don't know what your model is, this would cover the most possible data types.
_.isEmpty(null);
// => true
_.isEmpty(true);
// => true
_.isEmpty(1);
// => true
_.isEmpty([1, 2, 3]);
// => false
_.isEmpty({ 'a': 1 });
// => false
If you want to check if object/array is empty, I use:
angular.equals({}, yourObject);
angular.equals([], yourArray);