I've come up with a unique idea to create a custom rainbowize pipe that wraps each letter in a span with a random color of the rainbow as the css color property. My goal is to implement this custom pipe across all components in my app without having to import it separately into each one.
import { Component } from 'angular2/core';
import { RainbowizePipe } from '../pipes/rainbowize';
@Component({
'pipes': [RainbowizePipe]
})
Then, I can use it in templates like this:
<p>{{text | rainbowize}}</p>
Currently, importing the Rainbowize pipe into each component works fine for me, but it would be more efficient if I could import it globally only once and have it accessible throughout the entire app.
I'm wondering if there is a recommended Angular 2 / Typescript approach to achieving this global availability for a custom pipe?