Merge pull request #3646 from IgniteUI/apetrov/add-select-state/list-sample

feat(list): add the new "selected" property to samples

Author: simeonoff

src/app/lists/list/list-item-selection/list-item-selection.component.html

@@ -14,8 +14,7 @@
   <igx-list>
     <igx-list-item [isHeader]="true">Contacts</igx-list-item>
     @for (contact of contacts | igxFilter: filterContacts; track contact) {
-      <igx-list-item [ngClass]="contact.selected ? 'selected' : ''" (click)="selectItem(contact)"
-        >
+      <igx-list-item [selected]="contact.selected" (click)="contact.selected = !contact.selected">
         <igx-avatar igxListThumbnail [src]="contact.photo" shape="circle"></igx-avatar>
         <span igxListLineTitle>{{ contact.name }}</span>
         <span igxListLineSubTitle>{{ contact.phone }}</span>

src/app/lists/list/list-item-selection/list-item-selection.component.scss

@@ -1,24 +1,29 @@
 :host {
-    display: block;
-    padding: 16px;
+  display: block;
+  padding: 16px;
 
-    .selected {
-        background-color: var(--ig-secondary-500)
-    }
-
-    .list-sample {
-        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
-            0px 1px 1px 0px rgba(0, 0, 0, 0.14),
-            0px 2px 1px -1px rgba(0, 0, 0, 0.12);
-    }
+  igx-list-item:hover {
+    cursor: pointer;
+  }
+}
 
-    igx-icon {
-      cursor: pointer;
-      position: relative;
-    }
+.list-sample {
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
+    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+    0px 2px 1px -1px rgba(0, 0, 0, 0.12);
+}
 
-    .search {
-        margin-bottom: 16px;
-    }
+igx-icon {
+  cursor: pointer;
+  position: relative;
+}
 
+.search {
+  margin-bottom: 16px;
 }
+
+igx-list-item {
+  --item-background-selected: var(--ig-secondary-500);
+  --item-title-color-selected: var(--ig-secondary-500-contrast);
+  --item-subtitle-color-selected: var(--ig-info-100);
+}

src/app/lists/list/list-item-selection/list-item-selection.component.ts

@@ -1,13 +1,12 @@
 import { Component } from '@angular/core';
 import { IgxFilterOptions, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxRippleDirective, IgxFilterPipe } from 'igniteui-angular';
 import { FormsModule } from '@angular/forms';
-import { NgClass } from '@angular/common';
 
 @Component({
     selector: 'app-list-item-selection',
     templateUrl: './list-item-selection.component.html',
     styleUrls: ['./list-item-selection.component.scss'],
-    imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, NgClass, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxRippleDirective, IgxFilterPipe]
+    imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxRippleDirective, IgxFilterPipe]
 })
 export class ListItemSelectionComponent {
     public searchContact: string;
@@ -55,13 +54,6 @@ export class ListItemSelectionComponent {
         contact.isFavorite = !contact.isFavorite;
     }
 
-    public selectItem(item) {
-        if (!item.selected) {
-            this.contacts.forEach(c => c.selected = false);
-            item.selected = true;
-        }
-    }
-
     get filterContacts() {
         const fo = new IgxFilterOptions();
         fo.key = 'name';