Eslint integration

.eslintrc.json

@@ -0,0 +1,50 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}

angular.json

@@ -30,7 +30,9 @@
             "styles": [
               "src/styles.scss"
             ],
-                        "allowedCommonJsDependencies": ["chart.js"]
+            "allowedCommonJsDependencies": [
+              "chart.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -100,12 +102,24 @@
             ],
             "scripts": []
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
         }
       }
     }
   },
   "defaultProject": "sakai",
   "cli": {
-      "analytics": false
+    "analytics": false,
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
 }

package.json

@@ -6,7 +6,8 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-        "test": "ng test"
+    "test": "ng test",
+    "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
@@ -30,12 +31,20 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^14.2.6",
+    "@angular-eslint/builder": "14.1.2",
+    "@angular-eslint/eslint-plugin": "14.1.2",
+    "@angular-eslint/eslint-plugin-template": "14.1.2",
+    "@angular-eslint/schematics": "14.1.2",
+    "@angular-eslint/template-parser": "14.1.2",
     "@angular/cli": "~14.0.3",
     "@angular/compiler-cli": "~14.0.0",
     "@types/jasmine": "~3.10.0",
     "@types/jasminewd2": "~2.0.8",
     "@types/node": "^12.11.1",
+    "@typescript-eslint/eslint-plugin": "5.37.0",
+    "@typescript-eslint/parser": "5.37.0",
     "codelyzer": "^6.0.0",
+    "eslint": "^8.23.1",
     "jasmine-core": "~3.10.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~6.3.0",

src/app/app.component.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { PrimeNGConfig } from 'primeng/api';
+
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html'
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
 
     constructor(private primengConfig: PrimeNGConfig) { }
 

src/app/demo/components/pages/timeline/timelinedemo.component.ts

@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { PrimeIcons } from 'primeng/api';
 
 @Component({
     templateUrl: './timelinedemo.component.html',
     styleUrls: ['./timelinedemo.scss']
 })
-export class TimelineDemoComponent {
+export class TimelineDemoComponent implements OnInit {
 
     events1: any[] = [];
 

src/app/demo/components/primeblocks/blockviewer/blockviewer.component.ts

@@ -6,6 +6,7 @@ enum BlockView {
 }
 
 @Component({
+    // eslint-disable-next-line @angular-eslint/component-selector
     selector: 'block-viewer',
     template: `
     <div class="block-section">
@@ -16,8 +17,8 @@ enum BlockView {
                 <span class="badge-new" *ngIf="new">New</span>
             </span>
             <div class="block-actions">
-                <a tabindex="0" [ngClass]="{'block-action-active': blockView == BlockView.PREVIEW}" (click)="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
+                <a tabindex="0" [ngClass]="{'block-action-active': blockView === BlockView.PREVIEW}" (click)="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
-                <a [attr.tabindex]="'0'" [ngClass]="{'block-action-active': blockView == BlockView.CODE}" (click)="activateView($event, BlockView.CODE)">
+                <a [attr.tabindex]="'0'" [ngClass]="{'block-action-active': blockView === BlockView.CODE}" (click)="activateView($event, BlockView.CODE)">
                     <span>Code</span>
                 </a>
                 <a [attr.tabindex]="'0'" class="block-action-copy" (click)="copyCode($event)" 
@@ -25,10 +26,10 @@ enum BlockView {
             </div>
         </div>
         <div class="block-content">
-            <div [class]="containerClass" [ngStyle]="previewStyle" *ngIf="blockView == BlockView.PREVIEW">
+            <div [class]="containerClass" [ngStyle]="previewStyle" *ngIf="blockView === BlockView.PREVIEW">
                 <ng-content></ng-content>
             </div>
-            <div *ngIf="blockView == BlockView.CODE">
+            <div *ngIf="blockView === BlockView.CODE">
                 <app-code lang="markup" ngPreserveWhitespaces>{{code}}
                 </app-code>
             </div>
@@ -37,7 +38,7 @@ enum BlockView {
   `,
     styleUrls: ['./blockviewer.component.scss']
 })
-export class BlockViewer {
+export class BlockViewerComponent {
 
     @Input() header!: string;
 

src/app/demo/components/primeblocks/primeblocks.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { BlocksComponent } from './blocks/blocks.component';
 import { PrimeBlocksRoutingModule } from './primeblocks-routing.module';
-import { BlockViewer } from './blockviewer/blockviewer.component'
+import { BlockViewerComponent } from './blockviewer/blockviewer.component'
 import { AppCodeModule } from '../code/code.component';
 import { ChipModule } from 'primeng/chip';
 import { CheckboxModule } from 'primeng/checkbox';
@@ -28,6 +28,6 @@ import { TooltipModule } from 'primeng/tooltip';
         PrimeBlocksRoutingModule,
         AppCodeModule
     ],
-    declarations: [BlocksComponent, BlockViewer]
+    declarations: [BlocksComponent, BlockViewerComponent]
 })
 export class PrimeBlocksModule { }

src/app/demo/components/uikit/charts/chartsdemo.component.ts

@@ -1,11 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { LayoutService } from 'src/app/layout/service/app.layout.service';
 
 @Component({
     templateUrl: './chartsdemo.component.html'
 })
-export class ChartsDemoComponent implements OnInit {
+export class ChartsDemoComponent implements OnInit, OnDestroy {
 
     lineData: any;
 

src/app/demo/components/uikit/tree/treedemo.component.html

@@ -19,8 +19,8 @@
 				<ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
 					<tr>
 						<td *ngFor="let col of columns; let i = index">
-							<p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
+							<p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
-							<p-treeTableCheckbox [value]="rowNode" *ngIf="i == 0"></p-treeTableCheckbox>
+							<p-treeTableCheckbox [value]="rowNode" *ngIf="i === 0"></p-treeTableCheckbox>
 							{{rowData[col.field]}}
 						</td>
 					</tr>

src/app/layout/app.menuitem.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Host, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Subscription } from 'rxjs';
@@ -7,9 +7,8 @@ import { MenuService } from './app.menu.service';
 import { LayoutService } from './service/app.layout.service';
 
 @Component({
-    /* tslint:disable:component-selector */
+    // eslint-disable-next-line @angular-eslint/component-selector
     selector: '[app-menuitem]',
-    /* tslint:enable:component-selector */
     template: `
 		<ng-container>
             <div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text">{{item.label}}</div>
@@ -36,10 +35,6 @@ import { LayoutService } from './service/app.layout.service';
 			</ul>
 		</ng-container>
     `,
-    host: {
-        '[class.layout-root-menuitem]': 'root',
-        '[class.active-menuitem]': 'active'
-    },
     animations: [
         trigger('children', [
             state('collapsed', style({
@@ -58,11 +53,11 @@ export class AppMenuitemComponent implements OnInit, OnDestroy {
 
     @Input() index!: number;
 
-    @Input() root!: boolean;
+    @Input() @HostBinding('class.layout-root-menuitem') root!: boolean;
 
     @Input() parentKey!: string;
 
-    active = false;
+    @HostBinding('class.active-menuitem') active = false;
 
     menuSourceSubscription: Subscription;