Reputation: 2945
I'm reading through the docs on Angular.io, and as I do so I'm modifying a toy project to tinker with what I'm learning. I have a component with an element that I am resizing via events emitted from sliders. This is all working fine.
I came across Pipes, and to test it out I started outputting the dimensions of the box I was resizing. I can output the dimensions fine without pipes (and they update as expected), but whenever I add a pipe (e.g. DecimalPipe), I get the following error:
Unhandled Promise rejection: Template parse errors:
The pipe 'number' could not be found ("{{[ERROR ->]width | number}}x{{height}}
<br />
<md-slider (change)="doSizeChange('v',$event.value)" value"): SvgCanvasComponent@0:2 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError {__zone_symbol__error: Error: Template
...
My code is below. I think I have included all of the relevant files, but if there is anything else that would be useful to see, let me know and I'll include it.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MaterialModule } from '@angular/material';
import 'hammerjs';
import { AppComponent } from './app.component';
import { NnpGuiModule } from './nnpGui/nnpGui.module';
@NgModule({
imports: [
BrowserModule
,MaterialModule.forRoot()
,NnpGuiModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
import { Component } from '@angular/core';
import {MdButton} from '@angular/material';
@Component({
selector: 'my-app',
template: `<h1>NNP</h1>
<svgCanvasComponent [height]="400" [width]="600"></svgCanvasComponent>
<br /><button md-raised-button (click)="sayDoot()">DOOT</button>
`,
})
export class AppComponent {
name: string;
inputVal: string;
constructor() {
this.name="doooooot";
this.inputVal="";
}
sayDoot(): void {
console.log('doot');
}
}
import { NgModule } from '@angular/core';
import { MaterialModule } from '@angular/material';
import { SvgCanvasComponent } from './svgCanvas.component';
@NgModule({
imports: [
MaterialModule
]
,declarations: [SvgCanvasComponent] // what "belongs" to this module
,exports: [SvgCanvasComponent] // what exports to public from this module
})
export class NnpGuiModule {
}
import { Component, Input, ViewEncapsulation } from '@angular/core';
import {MdButton} from '@angular/material';
@Component({
selector: 'svgCanvasComponent',
template: `{{width | number:'3.1-5'}}x{{height | number:'3.1-5'}}
<br />
<md-slider (change)="doSizeChange('v',$event.value)" value="100"></md-slider>
<md-slider (change)="doSizeChange('h',$event.value)" value="100"></md-slider>
<button md-button (click)="doResetSize()">Reset</button>
<br />
<svg
id="svgEl"
style="border: 3px solid black"
id="logo"
[attr.width]="width" [attr.height]="height" viewBox="0 0 600 400"
(click)="doClick($event)"
></svg>
`,
//encapsulation: ViewEncapsulation.Native // None/Native/Emulated
})
export class SvgCanvasComponent {
@Input() width : number;
@Input() height: number;
initialHeight: number;
initialWidth: number;
constructor() {
[this.initialWidth, this.initialHeight] = [600, 400];
[this.width, this.height] = [this.initialWidth, this.initialHeight];
}
doClick(e:MouseEvent) {
console.log('SvgCanvasComponent clicked');
console.log(e);
}
doResetSize() {
[this.height, this.width] = [this.initialHeight, this.initialWidth];
}
doSizeChange(dir:string, pct:number) {
console.log(`doSizeChange: ${dir}; ${pct}`);
switch (dir) {
case 'h': this.height=pct/100.0 * this.initialHeight; break;
case 'v': this.width =pct/100.0 * this.initialWidth ; break;
}
}
}
Upvotes: 2
Views: 2863
Reputation: 657308
If used in AppModule
import BrowserModule
, in other modules import CommonModule
to make the pipe available:
@NgModule({
imports: [
MaterialModule,
CommonModule
]
https://angular.io/docs/ts/latest/api/common/index/CommonModule-class.html
Upvotes: 9