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