CODEWITHSUNDEEP
angulartypescript
Jefferson
Jefferson

Reputation: 101

Typescript Can't bind to parse errors

I am not sure why I am getting this error message about not able to bind the model. I have an Input that is a type of Pagebreakable. Is there anything else I need to do for this to work?

Unhandled Promise rejection: Template parse errors: Can't bind to 'model' since it isn't a known property of 'div'. (" 

<div class="pagebreak" [ERROR ->][model]="evaluatePagebreak()" (change)="onPagebreakChange($event)"></div>"): TemplateEditorComponent@9:23 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'model' since it isn't a known property of 'div'. ("
<div class="clear-comments"></div>

view

<div class="pagebreak" [model]="evaluatePagebreak()" (change)="onPagebreakChange($event)"></div>

Component

@Component({
    selector: ".pagebreak",
    template:
    `           
      <hr class='narrow' *ngIf="model.HasPagebreak" />         
      <span *ngIf="model.HasPagebreak" class='narrow'><a class='glyphicon glyphicon-remove' (click)='remove()'></a></span>
      <div *ngIf="!model.HasPagebreak" class='placeholder' (click)='add()'>put placeholder here</div>
      <hr class='wide' [class.enabled]="model.HasPagebreak"/>         
    `    
})
export class PageBreakComponent implements AfterViewInit, AfterViewChecked {

    @Input() model: Pagebreakable;
    @Output() change = new EventEmitter();    

    constructor(@Inject(ElementRef) private elementRef: ElementRef) {
    }

    add() {
        this.model.HasPagebreak = true;
        this.onChange();        
    }

    remove() {
        this.model.HasPagebreak = false;
        this.onChange();
    }

    onChange() {
        this.change.next({ value: this.model.HasPagebreak });
    }

    ngAfterViewInit() {
        var offset = $(this.elementRef.nativeElement).offset().left;
        $(this.elementRef.nativeElement).css('margin-left', '-' + offset + 'px');        
        $(this.elementRef.nativeElement).css({ 'width': 'calc(100% + ' + offset + 'px)' });       
    }

    ngAfterViewChecked() {
        if (this.isActive()) {
            if (!$(this.elementRef.nativeElement).hasClass('active')) {
                $(this.elementRef.nativeElement).addClass('active');
            }
        } else {
            if ($(this.elementRef.nativeElement).hasClass('active')) {
                $(this.elementRef.nativeElement).addClass('active');
            }
        }
    }

    isActive(): boolean {
        return (<any>window).pagebreakMode === true;
    }
}

Upvotes: 0

Views: 75

Answers (1)

msenne
msenne

Reputation: 613

The component you are referencing the pagebreak component from belongs to a Module. The pagebreak component also belongs to a Module. Make sure both are in the "declarations" list of their respective Modules. If they are in different modules, ensure that the pagebreak component is also listed in the "exports" list of its module, and that pagebreak's module is in the "imports" of the referencing component's module.

Upvotes: 1

Related Questions