TypeError: Cannot read property 'title' of undefined in angular

Issue

i have an array :

content =    [ { title : 'Canal notifications' , subtitle: ['Notification Push','Email']} , { title : 'Canal notifications' , subtitle: ['Notification Push','Email']} ];

i want to iterate this array using ngFor :

   <app-toggle-element *ngFor="let element of content; let i = index" [title]="element[i]['title']" [subtitle]="element[i]['subtitle'][i]" ></app-toggle-element>

i get this error :

Cannot read property 'title' of undefined

Solution

You have used the *ngForOf structural directive which is responsible to add your HTML in existing DOM elements.

And also the iteration variable element that you used in *ngForOf repeater is represent the current iteration data which contains your title and subtitle also,

So instead of fetching title and subtitle with array indexing, you can use the data contains in above iteration variable like,

Here doesn't know why you fetch the current index subtitle, but I have added here demo with your requirement

<app-toggle-element *ngFor="let element of content; let i = index" [title]="element.title" [subtitle]="element.subtitle[i]" >
</app-toggle-element>

Stackblitz Demo

Answered By - er-sho