From 7c64b8d3fd02d137146759fea3170e8865ae739a Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Thu, 19 Sep 2019 07:13:30 +0100
Subject: [PATCH] feat(language-service): add Angular pseudo elements into
 completions (#31248)

PR Close #31248
---
 packages/language-service/src/completions.ts       | 13 ++++++++++++-
 packages/language-service/test/completions_spec.ts | 10 ++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/language-service/src/completions.ts b/packages/language-service/src/completions.ts
index bd0f35c573..2efc53ca09 100644
--- a/packages/language-service/src/completions.ts
+++ b/packages/language-service/src/completions.ts
@@ -28,6 +28,8 @@ const hiddenHtmlElements = {
   link: true,
 };
 
+const angularPseudoElements = ['ng-container', 'ng-content', 'ng-template'];
+
 export function getTemplateCompletions(
     templateInfo: AstResult, position: number): ts.CompletionEntry[] {
   let result: ts.CompletionEntry[] = [];
@@ -242,9 +244,18 @@ function elementCompletions(info: AstResult, path: AstPath<HtmlAst>): ts.Complet
       sortText: name,
     };
   });
+  const pseudoElements = angularPseudoElements.map(name => {
+    return {
+      name,
+      // Need to cast to unknown because Angular's CompletionKind includes HTML
+      // entites.
+      kind: CompletionKind.COMPONENT as unknown as ts.ScriptElementKind,
+      sortText: name,
+    };
+  });
 
   // Return components and html elements
-  return uniqueByName(htmlElements.concat(components));
+  return uniqueByName([...htmlElements, ...components, ...pseudoElements]);
 }
 
 /**
diff --git a/packages/language-service/test/completions_spec.ts b/packages/language-service/test/completions_spec.ts
index 038a72d910..e7311dd5a5 100644
--- a/packages/language-service/test/completions_spec.ts
+++ b/packages/language-service/test/completions_spec.ts
@@ -51,6 +51,16 @@ describe('completions', () => {
     ]);
   });
 
+  it('should be able to return angular pseudo elements', () => {
+    const marker = mockHost.getLocationMarkerFor(APP_COMPONENT, 'empty');
+    const completions = ngLS.getCompletionsAt(APP_COMPONENT, marker.start);
+    expectContain(completions, CompletionKind.ANGULAR_ELEMENT, [
+      'ng-container',
+      'ng-content',
+      'ng-template',
+    ]);
+  });
+
   it('should be able to return h1 attributes', () => {
     const marker = mockHost.getLocationMarkerFor(APP_COMPONENT, 'h1-after-space');
     const completions = ngLS.getCompletionsAt(APP_COMPONENT, marker.start);