Unable to use pipe in component

[40x]

Hello,

I am trying to use the pipe in the component as follows:

        constructor(private fonticon: TNSFontIconService) { 
        var logo = this.fonticon.transform('fa-plus');
    }

But I see the following error:

[ts] Property 'transform' does not exist on type 'TNSFontIconService'.

also tried this:

constructor(private fonticon: TNSFontIconService, private pipe: TNSFontIconPurePipe) { 
       var logo = new TNSFontIconPurePipe(fonticon).transform('fa-plus');
}

this fixes the syntax error

constructor(private fonticon: TNSFontIconService, private test: TNSFontIconPipe) { 
        var x = this.test.transform('fa-plus', []);
    }

but it does throw a runtime error No provider for TNSFontIconPipe! I have included TNSFontIconService and TNSFontIconPipe in the appModules providers

what am I missing here?

[NathanWalker]

@NgSculptor try this if you want to use it manually:

import { TNSFontIconService, TNSFontIconPurePipe } from 'nativescript-ng2-fonticon';

constructor(private fonticon: TNSFontIconService) { 
       var logo = new TNSFontIconPurePipe(fonticon, []).transform('fa-plus');
}

You don't want to inject the pipes since they are not providers. Just import and instantiate manually. Also keep in mind the TNSFontIconPurePipe is intended to be used in cases where you know your collections have already loaded since they rely on the collections being fully loaded.

TNSFontIconPipe can only be used in a view binding since it relies on the Pipe decorators pure: false setting to update the view through the injection of the ChangeDetectorRef: https://github.com/NathanWalker/nativescript-ng2-fonticon/blob/master/src/app/pipes/fonticon.pipe.ts#L14 which is manually marked here: https://github.com/NathanWalker/nativescript-ng2-fonticon/blob/master/src/app/pipes/fonticon.pipe.ts#L30 therefore you can't really use that one manually.

Also ensure you are importing TNSFontIconModule and have it configured properly per the README:

@NgModule({
    imports: [
        NativeScriptModule,
        TNSFontIconModule.forRoot({
            'fa': 'font-awesome.css'
        })
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [
        AppComponent
    ]
})