I have a navigation component where I need to call a method that applies a custom pipe. However, when trying to reference it, the console displays an error stating "filterPortfolio is not defined".
The method is being bound to a click event in my DOM (the html is applied by the navigation component).
Here is a snippet of my HTML:
<div id="filter1" class="miniNavButton" *ngIf="portfolio" (click)="changeFilter('demo')">
<a>
<svg class="icon icon-eye">
<use xlink:href="symbol-defs.svg#icon-eye"></use>
</svg>
</a>
</div>
In my portfolio.component.ts file:
import { Component } from 'angular2/core';
import {ViewEncapsulation} from 'angular2/core';
import {Pipe, PipeTransform} from 'angular2/core';
@Pipe({ name: 'pagesFilter' })
class pagesFilter implements PipeTransform {
transform(pages, [key]): string {
return pages.filter(page => {
return page.hasOwnProperty(key);
});
}
}
@Component({
selector: 'portfolio',
templateUrl: '/app/views/portfolio.html',
styleUrls: ['../app/styles/PortfolioMobile.css', '../app/styles/PortfolioOther.css'],
pipes: [pagesFilter],
encapsulation: ViewEncapsulation.None
})
export class PortfolioComponent {
// Pages data here...
filterPortfolio(parameter:String) {
return this.pages ? 'pagesFilter' : parameter
};
}
In navigation.component.ts:
import { Component } from 'angular2/core';
import {ViewEncapsulation} from 'angular2/core';
import { Router, ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
import { LandingComponent } from './landing.component';
import { PortfolioComponent } from './portfolio.component';
import { SkillsComponent } from './skills.component';
import { ContactComponent } from './contact.component';
@Component({
selector: 'my-navigation',
templateUrl: '/app/views/navigation.html',
styleUrls: ['../app/styles/navigationMobile.css', '../app/styles/navigationOther.css'],
encapsulation: ViewEncapsulation.None,
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
export class NavigationComponent {
// Functions for changing mini nav state and calling filter
changeFilter(a) {
PortfolioComponent.apply(filterPortfolio(a));
}
}
This is how the HTML iterates through the pages object:
<div class="portfolioContainer">
<div *ngFor="#p of pages" class="portfolioPageContainer">
<img [attr.src]="p.img" class="portfolioThumbnail">
<h2>{{ p.name }}</h2>
<a [attr.href]="p.repo">
<div>
<p>{{ p.description }}</p>
</div>
<p class="portfolioRepoLink">See the Code!</p>
</a>
</div>
</div>
If anyone can suggest what might be causing the issue, it would be highly appreciated. Thank you.