Typescript Can't bind to parse errors

Question

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;
    }
}

There is no such thing as model in angular.

Vimal Patel
– Vimal Patel

2022-02-08 16:18:03 +00:00
Commented Feb 8, 2022 at 16:18 — Vimal Patel
– Vimal Patel, Commented Feb 8, 2022 at 16:18

msenne · Accepted Answer · 2022-02-08 18:00:44Z

1

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.

answered Feb 8, 2022 at 18:00

msenne

6135 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jefferson Over a year ago

I believe the pagebreak component is in the correct Module because when I try to add it to another Module I get an error. Uncaught (in promise): Error: Type PageBreakComponent is part of the declarations of 2 modules: RegimenModule and TemplateEditorModule!

msenne Over a year ago

Have you verified the other considerations? Is the component declared and exported from a module, and is that module imported in the module where the error is received?

Collectives™ on Stack Overflow

Typescript Can't bind to parse errors

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related