I have following directive code:
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({ selector: '[while]' })
export class WhileDirective {
constructor(private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef)
{ }
@Input() amountOfTeams: number;
@Input() counter:number;
@Input() set while(condition: boolean) {
some logic....
}
}
My component
import {Component, OnInit} from "@angular/core";
import {Game} from "../game";
import {PlayGameService} from "../playGame.service";
@Component({
selector: "teams-Name",
styleUrls:["teamsName.component.scss"],
template: `<div class='start-menu'>
<p *while="" [amountOfTeams]="" [counter]=""></p>
</div>`
})
export class TeamsNameComponent {
game: Game;
counter:number = 0;
constructor (public playGameService: PlayGameService) {}
ngOnInit(){
this.game = this.playGameService.getGame();
console.log(this.game);
}
}
I have loaded WhileDirective in declarations in my app.module.ts
Unfortunately I'm getting an error while compiling:
Uncaught Error: Template parse errors: Can't bind to 'amountOfTeams' since it isn't a known property of 'p'. (" ][amountOfTeams]="" [counter]="">
"): ng:///e/e.html@1:14 Can't bind to 'counter' since it isn't a known property of 'p'. (" ][counter]="">
The error that you're receiving is because you're trying to bind to a property of the p
element which doesn't exist.
To pass information into your structural directive, enter your logic within the double quotes of your directive.
<p *while="some logic"></p>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.