Currently, I am integrating Weather Icons dynamically with a weather API and I am seeking to have the icons change dynamically rather than using a cumbersome switch statement with numerous options. However, I am encountering challenges when attempting to create SCSS classes dynamically.
<i [class]="'wi wi-day-' + '{{weather.daily.weathercode[0] | lowercase}}'"></i>
<i class="wi wi-day-thunderstorm" ></i>
"'wi wi-day-' + '{{weather.daily.weathercode[0] | lowercase}}'"
The second line showcases a thunderstorm icon, while the third line displays "'wi-wi-day-' + 'thunderstorm'". I am puzzled by why the first line did not function as expected in this scenario.