Conditional Rendering and rendering list in LWC
- 4. Agenda What is Conditional Rendering Understanding code line by line
- 5. What is Conditional Rendering? If you want to hide some of the components from the HTML and show it based on conditions then use conditional rendering.
- 6. How to achieve conditional rendering in LWC? Like Aura Components <Aura:if>, apex (if, else) the same way we have <template if:true> and <template if:false>in Lightning web component.
- 7. Conditional Rendering Example 1. Design the component 2. On the basis of checkbox element should appear
- 8. Conditional Rendering Example 2 1. Design the component 2. On the click of button element should appear
- 9. Homework
- 11. Agenda What is loop for:each and iterator directives Advantage of iterator Understanding code line by line
- 12. What is Loop Loops allow you to do a task over and over again. 1 2 3 4 5 6 //Sample for loop code in apex List <String> fit = new List<String>{'Gym', 'Crossfit', 'Yoga'}; for(String f : fit){ System.debug('We have ' + f); }
- 13. Iterate over multiple items in LWC for:each Iterator Key Whenever we use for:each or Iterator we need to use key directive on the element on which we are doing iteration. Key gives unique id to each item
- 14. For:each Example
- 15. Iterator Properties of Iterator: value: items in the list index: index of item in the list first: Boolean indicating first item in the collection last: Boolean indicating last item in the collection
- 16. Iterator Example
- 17. Homework
- 19. Calculator
- 20. Q&A
- 21. Q&A
- 22. Thank you