PSYPACT- Practicing Over State Lines May 2024.pptx
Conditional Rendering and rendering list in LWC
1.
2.
3.
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.
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
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
