Type 'string' is not assignable to type 'number' when using property binding in an Angular template

Question

Getting the following errors:

Error: src/app/pages/journal-list/journal-list.component.html:27:23 - error TS2322: Type 'string' is not assignable to type 'number'.
    
    27 [title]="entry.title" [date]="entry.date"
                             ~~~~~~~~~~~~~~~~~~~
    
      src/app/pages/journal-list/journal-list.component.ts:7:16
        7   templateUrl: './journal-list.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component JournalListComponent.
    src/app/pages/journal-list/journal-list.component.html:26:1 - error TS2322: Type 'number' is not assignable to type 'string | any[] | null | undefined'.
    
    26 [routerLink] ="i"
       ~~~~~~~~~~~~~~~~~
    
      src/app/pages/journal-list/journal-list.component.ts:7:16
        7   templateUrl: './journal-list.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component JournalListComponent.

Apparently because I'm using the property binding [date]="entry.date". I've declared property date as a number. Why does this occur?

Code snippet for context:

 <div class="entries-list">
<app-journal-entry *ngFor="let entry of entries; index as i"
[routerLink] ="i" 
[title]="entry.title" [date]="entry.date" 
[body]="entry.body"></app-journal-entry>

</div>

app-journal-entry component date is number but you pass as string. so for that parseInt() used — Jimit H.
– Jimit H., Commented Feb 11, 2021 at 13:16
So what would that look like in my code example? [date]="parseInt(entry.date)"? — nmt
– nmt, Commented Feb 12, 2021 at 9:39
Here two option [date]="parseInt(entry.date)" or app-journal-entry component date make it "any" type. i would suggest first option. — Jimit H.
– Jimit H., Commented Feb 12, 2021 at 9:54
The first option gives this error message: Property 'parseInt' does not exist on type 'JournalListComponent'. Changing the type to "any" just takes me back to square one, so it's complaining about string not being assignable to type number. — nmt
– nmt, Commented Feb 12, 2021 at 10:56

Semiloore · Accepted Answer · 2021-04-01 15:02:34Z

17

The error occurs when strictTemplates is enabled, i think its a bug.

You can use "$any(*)"

So instead of using [title]="entry.title"

you should use [title]=$any(entry.title)

For more information see the link https://github.com/angular-split/angular-split/issues/220

edited Apr 1, 2021 at 15:02

answered Mar 31, 2021 at 15:09

Semiloore

1715 bronze badges

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

4 Comments

Shivam Singla Over a year ago

Please consider giving some explanation to the OP why the problem is occurring and how your solution is solving the problem.

Semiloore Over a year ago

The error occurs when strictTemplates is enabled, i think its a bug.

Shivam Singla Over a year ago

Please edit the answer and add the explanation in the answer itself.

Timtim Over a year ago

Looks like two bots talking to each other

Collectives™ on Stack Overflow

Type 'string' is not assignable to type 'number' when using property binding in an Angular template

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related