Error in Angular template: Object is possibly 'undefined'

Question

I'm encountering an error in my Angular application's template file (dashboard.component.html). The error message is "Object is possibly 'undefined'." Here's the relevant part of the template causing the issue:

<div>
    <p class="title">Dashboard</p>

    <ul>
       @for(post of posts; track post.title){
        @if(post.id%2==0){
            <li>{{post.id}}-{{post.title}}</li>
        }
       }
    </ul>
</div>

// dashboard.component.ts

import { Component } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
    selector: 'app-dashboard',
    standalone: true,
    imports: [],
    templateUrl: './dashboard.component.html',
    styleUrl: './dashboard.component.scss',
})

export class DashboardComponent {
    email = localStorage.getItem('email');
    posts:any;
    constructor(private authService: AuthService) { 
        this.GetAllPosts();
    }

    signOut() {
        this.authService.signOut();
    }

    GetAllPosts(){
        this.authService.getAllPosts().subscribe((res)=>{
            this.posts = res;
        })
    }
}

The error specifically points to line 10, where I'm trying to iterate over posts using an @for loop and check if post.id % 2 == 0. However, TypeScript is flagging this as a potential error because posts might be undefined or null.

How can I modify this template code to handle the possibility that posts might be undefined while avoiding this error?

Answer 1

Try defaulting the value to 0 zero if it's undefined like below. If post?.id gives undefined, the || or condition will default the value to zero and the modulus will work fine:

<div>
    <p class="title">Dashboard</p>

    <ul>
       @for(post of posts; track post.title){
        @if((post?.id || 0) % 2 === 0){
            <li>{{post.id}}-{{post.title}}</li>
        }
       }
    </ul>
</div>