angular 2 round a calculated number in html

Question

I have a calculated number in the html which belongs to Component1 as below. Component1 used as a tab page in a bootstrap tab panel.

Here is the html with tab panel:

<div id="minimal-tabs" style="padding:75px;padding-top:60px;font-family:Alef, sans-serif;font-size:20px;">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab-1" role="tab" data-toggle="tab" (click)="requestTabClick()">Requests </a></li>
        <li><a href="#tab-2" role="tab" data-toggle="tab" (click)="historyTabClick()">History </a></li>
    </ul>
    <div class="tab-content">
      
        <div class="tab-pane active" role="tabpanel" id="tab-1">
           
        </div>
        <div class="tab-pane" role="tabpanel" id="tab-2">
            <component1></component1>
        </div>
    </div>
</div>

Component1 HTML

<div class="table-responsive" style="margin-top:30px;font-size:14px;">
    <table class="table table-striped table-condensed">
        <thead>
            <tr>
                <th>Institute </th>
                <th>Location </th>
                <th>Age </th>
                <th>Duration </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let hItem of historyItems">
                <td>{{hItem.institute}}</td>
                <td>{{hItem.location}}</td>
                <td>{{hItem.age}}</td>
                <td>{{hItem.duration / 60 |round:0 }}</td>
            </tr>
        </tbody>
    </table>
</div>

Component1.ts

import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
import { Pipe } from '@angular/core';



@Pipe({ name: 'round' })
export class RoundPipe {
    transform(input: number) {
        return Math.round(input);
    }
}

export class HistoryItem {
    Institute: string;
    JoinUrl: string;
    MeetingId: string;
    Age: string;
    Location: string;
    Duration: string;
}


@Component({
    selector: 'component1',
    templateUrl: 'app/components/Component1.html'
})
export class Component1 implements OnInit {

    public historyItems: Array<HistoryItem> = [];

    constructor(
        private _router: Router
      ) {

    }

    ngOnInit() {

        
    }

}

When I used a pipe like in above approach to round the calculated value it gives me following error:

Error: Uncaught (in promise): Error: Template parse errors: The pipe 'round' could not be found ("{meeting.patientName}} {{[ERROR ->]meeting.duration / 60 |round:0 }}

Answer 1

You need to import the pipe inside the module under declarations

NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        RoundPipe 
    ]