feat(template): add parentheses () wrapper for name when kind is Output

packages/template/ng-package.json

@@ -10,7 +10,7 @@
       "src/assets/styles"
     ]
   },
-  "whitelistedNonPeerDependencies": [
+  "allowedNonPeerDependencies": [
     "docsearch.js"
   ]
 }

packages/template/src/pages/component-viewer/api/component-api.component.html

@@ -25,7 +25,7 @@ <h1 class="name" id="{{ apiDeclaration.name }}">{{ apiDeclaration.name }}</h1>
           <tbody>
             <tr class="dg-api-properties-row" *ngFor="let property of apiDeclaration.properties">
               <td class="dg-api-properties-name-cell">
-                <label><span *ngIf="property.kind | dgIsContentChildKind">#</span>{{ property.aliasName || property.name }}</label>
+                <label>{{ property | dgPropertyName }}</label>
               </td>
               <td class="dg-api-properties-type-cell">
                 <label class="">{{ property.type.name || property.type }}</label>

packages/template/src/shared/pipes/property-name.pipe.spec.ts

@@ -0,0 +1,79 @@
+import { PropertyNamePipe } from './property-name.pipe';
+
+describe('property-name', () => {
+    it('should get property name for Input', () => {
+        const result = new PropertyNamePipe().transform({
+            kind: 'Input',
+            name: 'thyType',
+            type: 'string'
+        });
+        expect(result).toEqual('thyType');
+    });
+
+    it('should get property name with alias name for Input', () => {
+        const result = new PropertyNamePipe().transform({
+            kind: 'Input',
+            name: 'thyType',
+            type: 'string',
+            aliasName: 'thyTypeAlias'
+        });
+        expect(result).toEqual('thyTypeAlias');
+    });
+
+    it('should get property name for Output', () => {
+        const result = new PropertyNamePipe().transform({
+            kind: 'Output',
+            name: 'thyChange',
+            type: 'EventEmitter<boolean>'
+        });
+        expect(result).toEqual('(thyChange)');
+    });
+
+    it('should get property name with alias name for Output', () => {
+        const result = new PropertyNamePipe().transform({
+            kind: 'Output',
+            name: 'thyChange',
+            aliasName: 'thyChangeAlias',
+            type: 'EventEmitter<boolean>'
+        });
+        expect(result).toEqual('(thyChangeAlias)');
+    });
+
+    it('should get property name for ContentChild', () => {
+        const result = new PropertyNamePipe().transform({
+            kind: 'ContentChild',
+            name: 'header',
+            type: 'TemplateRef<unknown>'
+        });
+        expect(result).toEqual('#header');
+    });
+
+    it('should get property name with alias name for ContentChild', () => {
+        const result = new PropertyNamePipe().transform({
+            kind: 'ContentChild',
+            name: 'header',
+            aliasName: 'headerAlias',
+            type: 'TemplateRef<unknown>'
+        });
+        expect(result).toEqual('#headerAlias');
+    });
+
+    it('should get property name for ContentChildren', () => {
+        const result = new PropertyNamePipe().transform({
+            kind: 'ContentChildren',
+            name: 'header',
+            type: 'TemplateRef<unknown>'
+        });
+        expect(result).toEqual('#header');
+    });
+
+    it('should get property name with alias name for ContentChildren', () => {
+        const result = new PropertyNamePipe().transform({
+            kind: 'ContentChildren',
+            name: 'header',
+            aliasName: 'headerAlias',
+            type: 'TemplateRef<unknown>'
+        });
+        expect(result).toEqual('#headerAlias');
+    });
+});

packages/template/src/shared/pipes/property-name.pipe.ts

@@ -0,0 +1,22 @@
+import { NavigationItem } from './../../interfaces/navigation-item';
+import { Pipe, PipeTransform } from '@angular/core';
+import { PropertyDeclaration } from '../../interfaces';
+import { IsNgContentChildKindPipe } from './ng-kind.pipe';
+
+@Pipe({ name: 'dgPropertyName' })
+export class PropertyNamePipe implements PipeTransform {
+    constructor() {}
+
+    transform(property: PropertyDeclaration): string {
+        const ngContentChildKind = new IsNgContentChildKindPipe();
+        const isContentChild = ngContentChildKind.transform(property.kind);
+        const name = property.aliasName || property.name;
+        if (isContentChild) {
+            return `#${name}`;
+        } else if (property.kind === 'Output') {
+            return `(${name})`;
+        } else {
+            return `${name}`;
+        }
+    }
+}

packages/template/src/shared/shared.module.ts

@@ -28,6 +28,7 @@ import { DocPagesLinksComponent } from './doc-pages-links/doc-pages-links.compon
 import { SearchComponent } from './search/search.component';
 import { HighlightPipe } from './pipes/highlight.pipe';
 import { IsNgContentChildKindPipe } from './pipes/ng-kind.pipe';
+import { PropertyNamePipe } from './pipes/property-name.pipe';
 
 const COMPONENTS = [
     NavbarComponent,
@@ -47,6 +48,7 @@ const COMPONENTS = [
     CopyComponent,
     IsComponentDocPipe,
     IsNgContentChildKindPipe,
+    PropertyNamePipe,
     TranslatePipe,
     IsModeLitePipe,
     IsModeFullPipe,

packages/template/tsconfig.json

@@ -5,6 +5,7 @@
     "target": "es2015",
     "declaration": true,
     "inlineSources": true,
+    "strict": true,
     "types": [],
     "lib": [
       "dom",