From a44e52cfdfccbcd2176eccd746d0544bccf9c9b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Przemys=C5=82aw=20G=C4=99d=C5=BAba?=
 <przemyslaw.gedzba@ready4s.com>
Date: Wed, 13 Nov 2019 13:38:42 +0100
Subject: [PATCH 1/2] Add support for nested label keys

---
 projects/angular-mentions/src/lib/mention.directive.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/projects/angular-mentions/src/lib/mention.directive.ts b/projects/angular-mentions/src/lib/mention.directive.ts
index aa7b7f96a..37e0616cb 100644
--- a/projects/angular-mentions/src/lib/mention.directive.ts
+++ b/projects/angular-mentions/src/lib/mention.directive.ts
@@ -52,7 +52,13 @@ export class MentionDirective implements OnChanges {
     labelKey: 'label',
     maxItems: -1,
     allowSpace: false,
-    mentionSelect: (item: any) => this.activeConfig.triggerChar + item[this.activeConfig.labelKey]
+    mentionSelect: (item: any) => {
+      let nestedLabel = item;
+      this.activeConfig.labelKey.split('.').forEach(
+        key => nestedLabel = nestedLabel[key]
+      );
+      return this.activeConfig.triggerChar + nestedLabel;
+    }
   }
 
   // template to use for rendering list items

From 37017b997c9ffb39fb0233c91d84a37dcebff1c6 Mon Sep 17 00:00:00 2001
From: Przemyslaw Gedzba <przemyslaw.gedzba@gmail.com>
Date: Wed, 13 Nov 2019 22:25:57 +0100
Subject: [PATCH 2/2] Fix nested label keys

---
 .../src/lib/mention-list.component.ts              | 10 +++++++++-
 .../angular-mentions/src/lib/mention.directive.ts  | 14 +++++++++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/projects/angular-mentions/src/lib/mention-list.component.ts b/projects/angular-mentions/src/lib/mention-list.component.ts
index ffa283f0a..b5e40b27a 100644
--- a/projects/angular-mentions/src/lib/mention-list.component.ts
+++ b/projects/angular-mentions/src/lib/mention-list.component.ts
@@ -16,7 +16,7 @@ import { getCaretCoordinates } from './caret-coords';
   styleUrls: ['./mention-list.component.scss'],
   template: `
     <ng-template #defaultItemTemplate let-item="item">
-      {{item[labelKey]}}
+      {{getItemValueByLabelKey(item)}}
     </ng-template>
     <ul #list [hidden]="hidden" class="dropdown-menu scrollable-menu"
     [class.mention-menu]="!styleOff" [class.mention-dropdown]="!styleOff && dropUp">
@@ -51,6 +51,14 @@ export class MentionListComponent implements OnInit {
     }
   }
 
+  public getItemValueByLabelKey(item) {
+    let nestedLabel = item;
+    this.labelKey.split('.').forEach(
+      key => nestedLabel = nestedLabel[key]
+    );
+    return nestedLabel;
+  }
+
   // lots of confusion here between relative coordinates and containers
   position(nativeParentElement: HTMLInputElement, iframe: HTMLIFrameElement = null) {
     if (isInputOrTextAreaElement(nativeParentElement)) {
diff --git a/projects/angular-mentions/src/lib/mention.directive.ts b/projects/angular-mentions/src/lib/mention.directive.ts
index 37e0616cb..6ca053575 100644
--- a/projects/angular-mentions/src/lib/mention.directive.ts
+++ b/projects/angular-mentions/src/lib/mention.directive.ts
@@ -108,6 +108,14 @@ export class MentionDirective implements OnChanges {
     }
   }
 
+  private getItemValueByLabelKey(item, labelKey) {
+    let nestedLabel = item;
+    labelKey.split('.').forEach(
+      key => nestedLabel = nestedLabel[key]
+    );
+    return nestedLabel;
+  }
+
   // add configuration for a trigger char
   private addConfig(config:MentionConfig) {
     // defaults
@@ -125,9 +133,9 @@ export class MentionDirective implements OnChanges {
         });
       }
       // remove items without an labelKey (as it's required to filter the list)
-      items = items.filter(e => e[config.labelKey]);
+      items = items.filter(e => this.getItemValueByLabelKey(e, config.labelKey));
       if (!config.disableSort) {
-        items.sort((a,b)=>a[config.labelKey].localeCompare(b[config.labelKey]));
+        items.sort((a,b) => this.getItemValueByLabelKey(a, config.labelKey).localeCompare(this.getItemValueByLabelKey(b, config.labelKey)));
       }
     }
     config.items = items;
@@ -313,7 +321,7 @@ export class MentionDirective implements OnChanges {
       // disabling the search relies on the async operation to do the filtering
       if (!this.activeConfig.disableSearch && this.searchString) {
         let searchStringLowerCase = this.searchString.toLowerCase();
-        objects = objects.filter(e => e[this.activeConfig.labelKey].toLowerCase().startsWith(searchStringLowerCase));
+        objects = objects.filter(e => this.getItemValueByLabelKey(e, this.activeConfig.labelKey).toLowerCase().startsWith(searchStringLowerCase));
       }
       matches = objects;
       if (this.activeConfig.maxItems > 0) {