*ngFor directive isn't working with mat-expansion panel. Need solution

February 13, 2023

when I am adding *ngFor with mat-expansion panel in my html file, it is not letting it work. The moment I remove it, it works fine. Here are some screenshots of the files.

I tried with and without *ngfor and without it, that works but with it, it doesnt.

html

<mat-accordion>
    <mat-expansion-panel *ngFor = "let post of posts">
        <mat-expansion-panel-header>
        {{ post.title }}
        </mat-expansion-panel-header>
       {{ post.content }}
    </mat-expansion-panel>
</mat-accordion>

ts file

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})
export class PostListComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  posts : [
    { title : "this is first title" , content : "This is 1 content" },
    {title : "this is second title", content : "This is 2 content"},
    {title : "this is third title", content : "This is 3 content"}
  ];
}

when I am adding *ngFor with mat-expansion panel in my html file, it is not letting it work. The moment I remove it, it works fine. Here are some screenshots of the files.

I tried with and without *ngfor and without it, that works but with it, it doesnt.

>Solution :

You defined your post array in wrong way. : is used to declare the type of property so use = instead

posts = [ 
    { title : "this is first title" , content : "This is 1 content" },
    {title : "this is second title", content : "This is 2 content"},
    {title : "this is third title", content : "This is 3 content"}
  ];