Ternary Operator in Salesforce Lightning Components

Using Ternary Operator in Salesforce Lightning Components

 // Ternary_Operator.cmp

<aura:component >

<aura:attribute name=”isError” type=”Boolean” description=”If Name is empty then true, else false”/>

<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}” />

<div class=”init”> <lightning:input label=”Enter your Name” aura:id=”FullName”

class=”{!v.isError == true ? ‘error errorBorder’ : ‘correct correctBorder’}”

onchange=”{!c.handleNameChange}” />



// Ternary_Operator.js


doInit: function(component) {



handleNameChange : function(component)


var name = component.find(“FullName”).get(“v.value”);

if(name == null || name == ” || name == undefined)


component.set(“v.isError”,true); }


component.set(“v.isError”,false); } },


// Ternary_Operator.css

.THIS {}

.THIS .error{ background-color:#D25A5A;}

.THIS .correct{ background-color:#a3ea82;}

.THIS .errorBorder{ border-color: red; border-width: 10px; border-style: solid;}

.THIS .correctBorder{ border-color: green; border-width: 10px; border-style: solid; }

.THIS.init{ width:50%; position:relative; left:200px; top:100px; }

// Ternary_OperatorApp.app

<aura:application extends=”force:slds”> <c:Ternary_Operator/></aura:application>


Leave a Reply


We're not around right now. But you can send us an email and we'll get back to you, asap.


About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2020 Forcetalks. All Right Reserved.

Log in with your credentials


Forgot your details?