How to check if variable exists and then print it in Angular?

Question

Here is my example:

<img data-placement="bottom" data-toggle="tooltip" class="tip"
     data-original-title="{{user.dbInfo.city}}, {{user.dbInfo.country_name}}"
     src="https://countryflags.io/{{user.dbInfo.country}}/flat/24.png">

and I want to show the {{user.dbInfo.city}}, only if the variable exists. In some cases there is no city.

How can I achieve this ?

In this case it is better to build the whole string in component and then pass it to data-original-title, because template solution might be weird — Majesty
– Majesty, Commented Dec 5, 2019 at 17:13
Did you try user.dbInfo.hasOwnProperty('city') in ngIf ?? — Saeed
– Saeed, Commented Dec 5, 2019 at 17:15

Sudarshana Dayananda · Accepted Answer · 2019-12-05 17:46:47Z

1

You can do it as follows.

 <img data-placement="bottom" data-toggle="tooltip" class="tip"
    data-original-title="{{ user.dbInfo.city ? user.dbInfo.city + ',' + user.dbInfo.country_name : user.dbInfo.country_name }}"
    src="https://countryflags.io/{{user.dbInfo.country}}/flat/24.png">

edited Dec 5, 2019 at 17:46

answered Dec 5, 2019 at 17:27

Sudarshana Dayananda

5,2652 gold badges27 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

EnexoOnoma Over a year ago

I get this error

http://errors.angularjs.org/1.5.8/$parse/ueoe?p0=user.dbInfo.city%20%3F%20user.dbInfo.city%20%2B%20'%2C'%20%2B%20user.dbInfo.country_name%20%3F%20user.dbInfo.country_name

Sudarshana Dayananda Over a year ago

sorry small mistake i have added extra ?. can you check now ?

Axiome · Accepted Answer · 2019-12-05 17:11:21Z

0

From what I understand you want to display another data-original-title based on the existence of the variable.

<ng-container *ngIf="user.dbInfo.city">
    <img data-placement="bottom" data-toggle="tooltip" class="tip" data-original-title="{{user.dbInfo.city}}, {{user.dbInfo.country_name}}" src="https://countryflags.io/{{user.dbInfo.country}}/flat/24.png">
</ng-container>
<ng-container *ngIf="!user.dbInfo.city">
    <img data-placement="bottom" data-toggle="tooltip" class="tip" data-original-title="{{user.dbInfo.country_name}}" src="https://countryflags.io/{{user.dbInfo.country}}/flat/24.png">
</ng-container>

answered Dec 5, 2019 at 17:11

Axiome

8451 gold badge6 silver badges19 bronze badges

3 Comments

EnexoOnoma Over a year ago

Hello, I am using Angular with ng-if version

Majesty Over a year ago

too complicated for such small problem

Axiome Over a year ago

@LuninRoman If you have a better way to do it, feel free to propose your own answer. That is a way to achieve what is asked.

Matt U · Accepted Answer · 2019-12-05 17:14:41Z

0

For things like this, I always create a method in my component class, something like formatImageOriginalTitle(dbInfo) which would look like this:

formatImageOriginalTitle(dbInfo) {
    return dbInfo.city ? `${dbInfo.city}, ${dbInfo.country_name}` : dbInfo.country_name;
}

Then in the markup:

<img ... data-original-title="formatImageOriginalTitle(user.dbInfo)" ... />

If this is something you may reuse in other places, you may create a pipe instead.

answered Dec 5, 2019 at 17:14

Matt U

5,12812 silver badges28 bronze badges

1 Comment

Matt U Over a year ago

Here's a working example: stackblitz.com/edit/angular-aqnmba

Adrita Sharma · Accepted Answer · 2019-12-05 17:29:56Z

0

You can evaluate it in the template itself by using property binding.

[attr.original-title]="(user.dbInfo.city ? user.dbInfo.city + ',' : ' ') + user.dbInfo.country_name"

Try like this:

<img data-placement="bottom" data-toggle="tooltip" class="tip"
 [attr.original-title]="(user.dbInfo.city ? user.dbInfo.city + ',' : '') + user.dbInfo.country_name"
 src="https://countryflags.io/{{user.dbInfo.country}}/flat/24.png">

Working Demo

edited Dec 5, 2019 at 17:29

answered Dec 5, 2019 at 17:20

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

6 Comments

EnexoOnoma Over a year ago

Hello, for this data-original-title="{{user.dbInfo.city}} + ({{user.dbInfo.city}} ? ',' : '') + {{user.dbInfo.country_name}}" I get this result Athens + (Athens ? ',' : '') + Greece

EnexoOnoma Over a year ago

But I need it to be like Athens, Greece

Adrita Sharma Over a year ago

Use property binding

EnexoOnoma Over a year ago

I don't know what property binding is

Adrita Sharma Over a year ago

[attr.original-title]="" this is property binding. {{}} is interpolation. Try [attr.original-title]="(user.dbInfo.city ? user.dbInfo.city + ',' : ' ') + user.dbInfo.country_name"

|

Saeed · Accepted Answer · 2019-12-05 17:40:27Z

A function as @MattU said can help you

var app = angular.module("app", []);

app.controller("MainCtrl", function($scope) {
  $scope.user1 = {
    dbInfo: {
      city: 'CITY',
      country: 'be'
    }
  };

  $scope.user2 = {
    dbInfo: {
      country: 'be'
    }
  };


  $scope.getTitle = function(obj) {
    if (obj.dbInfo.hasOwnProperty('city')) {
      return obj.dbInfo.city + ',' + obj.dbInfo.country;
    }
    return obj.dbInfo.country;
  };

});

<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <img data-placement="bottom" data-toggle="tooltip" class="tip" data-original-title="{{getTitle(user1)}}" src="https://www.countryflags.io/{{user1.dbInfo.country}}/flat/24.png">

  <img data-placement="bottom" data-toggle="tooltip" class="tip" data-original-title="{{getTitle(user2)}}" src="https://www.countryflags.io/{{user2.dbInfo.country}}/flat/24.png">
</body>

</html>

Collectives™ on Stack Overflow

How to check if variable exists and then print it in Angular?

5 Answers 5

2 Comments

3 Comments

1 Comment

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related