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