Display and close toast in SLDS

Question

I have below code given in SLDS and I want to display this whenever the error occurs how can i achieve it? How can i display the toast and also close it on clicking the close button. I am using pure SLDS system and jquery. Any help in this would be appreciated.

    <div class="slds-notify_container">
  <div class="slds-notify slds-notify--toast slds-theme--error" role="alert">
    <span class="slds-assistive-text">Error</span>
    <button class="slds-button slds-notify__close slds-button--icon-inverse">
      <svg aria-hidden="true" class="slds-button__icon slds-button__icon--large">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
      </svg>
      <span class="slds-assistive-text">Close</span>
    </button>
    <div class="slds-notify__content slds-grid">
      <svg aria-hidden="true" class="slds-icon slds-icon--small slds-m-right--small slds-col slds-no-flex">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
      </svg>
      <div class="slds-col slds-align-middle">
        <h2 class="slds-text-heading--small">You encountered some errors when trying to save edits to Samuel Smith.</h2>
      </div>
    </div>
  </div>
</div>

Answer 1

Generally there are various ways with which you can achieve this requirement.

• Scenario 1 : We can use the aura:renderIf tag to display the div's conditionally. The isTrue attribute of the aura:renderIf takes an expression. This way if the error message is set to aura:attribute, it is possible to show the toast. Aura:RenderIf Documentation . Any Changes to aura:attribute will be reflected to UI it is a part of the normal render cycle.
• Scenario 2 : We can use the "slds-hide" class from lightning design system library to show and hide the components as per our convenience. Aura framework has util class which would help us in toggling the classes. Aura Util Class and Changing Styles

    var element = component.find("divtohide");
    $A.util.toggleClass(element, "slds-hide");

The Util class has a hasClass method as well with which we can check before toggling. When close button is clicked the click event can be handled to check for the class and then toggling the classes if the error message is set.

• Update: That being said, do take a look into the "ui:message" from salesforce lightning component bundle. The above mentioned can be implemented using this as well. Additionally you will have access to events from this aura:component and you would be adhering to the framework life-cycle. ui:message Reference Docs

Answer 2

Without using either (SLDS and JQuery) In the lightning namespace, there are out of the box components that can be used for showing toasts/notification messages:

lightning:notificationsLibrary

component markup:

<aura:component>
    <lightning:notificationsLibrary aura:id="notifLib"/>
    <lightning:button name="notice" label="Show Notice" onclick="{!c.handleShowNotice}"/>
</aura:component>

component controller method:

handleShowNotice : function(component, event, helper) {
    component.find('notifLib').showNotice({
        "variant": "error",
        "header": "Something has gone wrong!",
        "message": "Unfortunately, there was a problem updating the record.",
        closeCallback: function() {
            alert('You closed the alert!');
        }
    });

similarly, there is force:showToast

much easier than having to redo them with SLDS and using $A.util.toggleClass, however, easily doable as well.