Interview Questions – Lightning Framework – Part 6 – Conditional Markup, Iteration & CSS

Interview Questions – Lightning Framework – Part 6 – Conditional Markup, Iteration & CSS

Checkout earlier posts in interview question series to read previous questions.

44. How to render component conditionally?

Conditional markup is a term to display or hide components based on some condition. Example, show error component if login credentials are wrong, or show success component if credentials are correct.

Conditional markup can be achieved using 3 approaches:

  • aura:if – aura:if component is used to render components based on a boolean condition.
  • CSS classes with ternary operator – Ternary operator can be used to add or remove css classes from a component to achieve conditional markup.
  • JavaScript – Javascript can be used to remove or add markup in a component.

45. How aura:if helps in conditional markup?

aura:if is one of the best way to achieve conditional markup. aura:if tag accepts a parameter “isTrue” which accepts a boolean, if condition is true, the markup within aura:if is rendered else it is removed.

aura:if offers certain advantages as if the condition is false, the complete markup is removed completely from DOM along with listeners associated with it if any. Once the condition is true, the complete markup is fetched from server and listeners are place properly. This gives a performance boost to your component due to less markup and listeners.

46. How to implement if-else type condition using aura:if?

<aura:if isTrue="{!v.isVisible}">
<!— if condition is true, below markup code would be executed —>
        <p>I am visible</p>
<aura:set attribute=“else”>
<!— if condition is false, then this else part will be executed —>
</aura:set>
</aura:if>

Also Read: Aura:If (a saviour OR a destructor) – Best Practices

47. What is aura:iteration?

aura:iteration iterates over a collection of items and renders the body of the tag for each item. Data changes in the collection are rerendered automatically on the page. It also supports iterations containing components that are created exclusively on the client-side or components that have server-side dependencies.

<aura:iteration items="1,2,3,4,5" var="item">
        {!item}
</aura:iteration>

48. What is .THIS is css resource?

.THIS is CSS class added by framework, which adds namespacing to CSS and helps prevent one component’s CSS from overriding another component’s styling. The framework throws an error if a CSS file doesn’t follow this convention.

49. What are the considerations of using CSS classes in your component?

Top-level element or direct child elements of aura:component tag must not add any space between .THIS and CSS class name. Child elements should have a space between .THIS and class name.

<aura:component>
  <div class="white">
    Hello, HTML!
  </div>
  <ul>
    <li class="red">I'm red.</li>
  </ul>
</aura:component>

Here, to add css class definition for class “white” of element div, use below syntax:

.THIS.white{
color:white;
}

Note that there is not extra space between .THIS and .white.

For class “red” of li element, use below syntax:

.THIS .red{
color:red;
}

50. How to add or remove CSS class dynamically?

There are two ways to add or remove CSS class from elements at run time.

  • From Markup – Use ternary operator to dynamically add or remove CSS classes. Example:
<div class=“{! v.displayDiv ? ‘display-class’ : ‘hide-class’}”>
  • From JavaScript – You can add or remove CSS classes from JavaScript resource using addClass and removeClass method.
$A.util.addClass(cmpTarget, ‘className’);
$A.util.removeClass(cmpTarget, ‘className’);

Also Read: Designing And Developing Lightning Component – Best Practices

51. What is the use of toggleClass method?

To toggle a class, use $A.util.toggleClass(cmp, ‘class’), which adds or removes the class.

52. How to get event source in JavaScript controller?

event.getSource() method is used to identify event source. If you want to fetch local id of the element, you can use event.getSource().getLocalId() method.

Read Also:

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

Leave a Reply

Close Menu