Create a Pipe

[web-dave]

• Generate a pages pipe
• Use this Pipe in your book-detail Component

[web-dave]

generate

  ng g pipe books/shared/pages

[web-dave]

pages.pipe.ts

    transform(value: any, args?: any): any {
      return `${args}: ${value}`;
    }

[web-dave]

book-details.component.html

  <span class="badge bg-secondary">{{book.numPages | pages:'Seitenzahl'}}</span>

[web-dave]

book-details.component.ts

     console.log(new PagesPipe().transform(b.numPages,'S.'));

[web-dave]

Create a Directive