Pipes

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
 name: 'textEclipse'
})
export class TextEclipsePipe implements PipeTransform {

   transform(value: any, args?: any): any {
       let text = '';
       if (value == undefined) {
           return text;
       }
       if (value.length > args) {
           text = value.substr(0, args) + '...';
       } else {
           text = value;
       }
       return text;
   }

}

import { TextEclipsePipe  } from './pipes/text-eclipse.pipe';
{{teamName|textEclipse:30}}

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
 name: 'shortenDate'
})
export class ShortenDatePipe implements PipeTransform {

 constructor(private datePipe: DatePipe) {}

 transform(value: any, format: string = 'shortDate'): string | null {
   if (!value) {
     return '';
   }

   // Attempt to parse the value as a Date object
   const dateValue = new Date(value);
   if (isNaN(dateValue.getTime())) {    
     return value; // Return the original value if parsing fails
   }   return this.datePipe.transform(dateValue, format);
 }

}

import { Pipe, PipeTransform } from '@angular/core';:
 <p>Original Date: {{ myDate }}</p>
 <p>Short Date: {{ myDate | shortenDate }}</p>
 <p>Medium Date: {{ myDate | shortenDate: 'mediumDate' }}</p>
 <p>Custom Format: {{ myDate | shortenDate: 'yyyy-MM-dd' }}</p>
 <p>Another Custom Format: {{ myDate | shortenDate: 'dd/MM/yy' }}</p>
 

Custom Directive

canLoad In-build Directive

canLoad Directive using user role

(authentication-checking.service.ts)