Concepts utilized In this Lightning component :
- Data Binding Between Components using bound expressions
- Aura Method Call from Parent to child component
- Toast Message display on Parent component using Aura:Html in dynamic component creation.
- Clearing displayed toast message in predefined seconds within lightning context using getCallBack function
Data Binding Between Components using bound expressions:-
This Concept utilized in lightning:input field on Child component, whenever the Field loses its focus(Firstname or LastName) OnBlur function will be triggered which in turn will set the value to child component attribute ‘messageHolder’ and because of bound expression data binding occurs in parent component attribute which ultimately displays the toast message.
Note : Data binding is bidirectional (bound expression -{!expression}) in this usecase, if you want one way binding then you need to use unbound expression{#expression} Child component attribute value change won’t affect parent component.
Official documentation:- https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_data_binding.htm
Aura Method Call from Parent to child component:-
It has been done to call child component method by clicking on Submit button which defined in parent component which will again display the toast message for some predefined seconds. Also you can also use attributes with Aura Method
Official documentation:- https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_tag_method.htm
Toast Message display on Parent component using Aura:Html in dynamic component creation:-
SLDS Toast message created using dynamic component creation concept where display body created using aura:html and its html attributes are pushed into div and after that its value set into bound expression attribute ‘messageHolder’ where it is used in parent component to display the toast message.
Official documentation:- https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_dynamic_cmp_async.htm
Clearing displayed toast message in predefined seconds within lightning context using getCallBack function:-
Displayed toast message will be cleared automatically after 4 seconds because of getCallback function which is more handy when we need to modify the component than in normal rendering and one more beautiful example for this is once i applied getCallback with setInterval() method to Queueable interface where it will make a callout continuously till it gets response(file) which is more than 6mb where in salesforce we have 6 mb limitation with synchronous call.
Official documentation:- https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_mod_ext_js.htm
Working code has been given below,
Leave a Reply