CODEWITHSUNDEEP
javascriptangularjsangular
EnexoOnoma
EnexoOnoma

Reputation: 8836

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

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 ?

Upvotes: 0

Views: 1839

Answers (5)

Sudarshana Dayananda
Sudarshana Dayananda

Reputation: 5265

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">

Upvotes: 1

Saeed
Saeed

Reputation: 5488

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>

Upvotes: 0

Adrita Sharma
Adrita Sharma

Reputation: 22213

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

Upvotes: 0

Matt U
Matt U

Reputation: 5118

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.

Upvotes: 0

Axiome
Axiome

Reputation: 845

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>

Upvotes: 0

Related Questions