feat(language-service): add Angular pseudo elements into completions (#31248)

PR Close #31248

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]);
 }
 
 /**

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);