orindal pipe

src/app/app.module.ts

@@ -23,6 +23,7 @@ import { NumberonlyDirective } from './custom-directves/numberonly.directive';
 import { HighlightDirective } from './custom-directves/highlight.directive';
 import { PipesComponent } from './components/pipes/pipes.component';
 import { RemainingPipe } from './custom-pipes/remaining.pipe';
+import { OrdinalPipe } from './custom-pipes/ordinal.pipe';
 
 @NgModule({
   declarations: [
@@ -42,7 +43,8 @@ import { RemainingPipe } from './custom-pipes/remaining.pipe';
     NumberonlyDirective,
     HighlightDirective,
     PipesComponent,
-    RemainingPipe
+    RemainingPipe,
+    OrdinalPipe
   ],
   imports: [
     BrowserModule,

src/app/components/pipes/pipes.component.html

@@ -43,3 +43,6 @@ <h4>{{ today | date | lowercase }}</h4>
 <textarea [(ngModel)]="msg" maxlength="100" cols="30" rows="5"></textarea>
 <h4>Message is {{ msg }}</h4>
 <h4>Remaining characters are {{ msg | remaining : 100 }}</h4>
+<hr>
+<input [(ngModel)]="cardinal" />
+<h3>Cardinal number is {{cardinal}} , ordinal is {{ cardinal | ordinal }}</h3>

src/app/components/pipes/pipes.component.ts

@@ -3,14 +3,14 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-pipes',
   templateUrl: './pipes.component.html',
-  styleUrls: ['./pipes.component.css']
+  styleUrls: ['./pipes.component.css'],
 })
 export class PipesComponent {
-
   name: string = 'SrISaI GaNeSh';
   mySal: string = '5000';
   today: Date = new Date();
-  emp = { id : 101, name : 'Srisai', sal: 500000 };
+  emp = { id: 101, name: 'Srisai', sal: 500000 };
   cars: string[] = ['Tata', 'Mahindra', 'Toyota', 'Maruti', 'Hundai', 'Honda'];
-  msg: string ='';
+  msg: string = '';
+  cardinal: number = 21;
 }

src/app/custom-pipes/ordinal.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { OrdinalPipe } from './ordinal.pipe';
+
+describe('OrdinalPipe', () => {
+  it('create an instance', () => {
+    const pipe = new OrdinalPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/custom-pipes/ordinal.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'ordinal'
+})
+export class OrdinalPipe implements PipeTransform {
+
+  transform(value: unknown, ...args: unknown[]): unknown {
+    return null;
+  }
+
+}