[Fixed] property binding error when pipes is used

Issue

i am following this tutorial

https://ultimatecourses.com/blog/angular-pipes-custom-pipes

and i am trying to get the code posted below working. when i invoke the command

ng servr --open

i get the following error:

Error occurs in the template of component Appcomponent
ptoperty file does not exist on type Appcomponent

please let me know why i am getting this error and how to fix it

app.component.ts:

import { Component } from '@angular/core'
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    file = { name: 'logo.svg', size: 2120109, type: 'image/svg' };
}

app.component.html:

{{file.name}}

{{file.size | filesize}}

Solution

For using pipe we need to pass it in provider

I have created stackblitz demo you can check, it is working fine in my case I have attached here so you can check.

let me know if you still face any issue will help you.

https://stackblitz.com/edit/angular-9bk71w?file=src%2Fapp%2Fapp.module.ts