Conditional Class Binding with ngFor and ngIf

Combine ngFor and ngIf to apply a class conditionally on list items based on their properties.
/* Component's HTML Template */
  <li *ngFor="let item of items" 
    {{ }}
Iterates over the 'items' array and creates a list item for each element. The 'special-item' class is applied conditionally if the 'item.isSpecial' property is true, and the item is only included in the DOM if 'item.isVisible' is true.
/* Component's TS file snippet */
// Define the items array with properties
items = [
    { name: 'Item 1', isSpecial: true, isVisible: true },
    { name: 'Item 2', isSpecial: false, isVisible: true },
    { name: 'Item 3', isSpecial: true, isVisible: false },
    // more items...
Defines an 'items' array in the component's Typescript file. Each item has a 'name', a boolean 'isSpecial' indicating if it should receive the class, and a 'isVisible' indicating if it should be displayed.
/* CSS Stylesheet */
.special-item {
  font-weight: bold;
  color: green;
Defines the CSS for the 'special-item' class, which will be applied conditionally in the template.