@ngx-toolset/template-type-checker

Table of Contents

• @ngx-toolset/template-type-checker
  • Features
  • Installation
    • NPM
  • Usage
    • Module Import
    • TS
    • HTML

Features

• Possibility to validate object's class instance type in HTML template

Installation

NPM

npm install @ngx-toolset/template-type-checker --save

Choose the version corresponding to your Angular version:

| Angular | @ngx-toolset/template-type-checker | |---------|------------------------------------| | 14.x.x | >=0.0.1 <=1.0.0-rc.9 | | 15.x.x | 1.0.0-rc.10 | | 16.x.x | >=1.0.0-rc.11 <=2.x.x | | 17.x.x | 3.0.0 |

Usage

Import

Import the TypeCheckerPipe in the component(s) you would like to use it:

import { Component } from '@angular/core';
import { TypeCheckerPipe } from '@ngx-toolset/template-type-checker';

@Component({
  selector: 'app-sample',
  templateUrl: 'sample.component.html',
  styleUrls: ['sample.component.scss'],
  standalone: true,
  imports: [TypeCheckerPipe],
})
export class SampleComponent {}

TS Example

import { Component } from '@angular/core';
import { TypeCheckerPipe } from '@ngx-toolset/template-type-checker';

class ClassA {}

class ClassB {}

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.scss'],
  standalone: true,
  imports: [TypeCheckerPipe],
})
export class SampleComponent {
  public classA: typeof ClassA;
  public classB: typeof ClassB;
  public sampleObject: ClassA;

  public constructor() {
    this.classA = ClassA;
    this.classB = ClassB;
    this.sampleObject = new ClassA();
  }
}

HTML Example

<!-- TypeCheckerPipe returns object of type ClassA -> ngIf evaluates to truthy value -->
<div *ngIf="sampleObject | typeChecker:classA">
  This div will be rendered.
</div>

<!-- TypeCheckerPipe returns undefined -> ngIf evaluates to falsy value -->
<div *ngIf="sampleObject | typeChecker:classB">
  This div will not be rendered.
</div>