Could not get the 'component' value in menu on app.component.ts. Why?

Ionic Framework ionic-v3
1

Dear Friends,

In my app.components.ts
there is a menu with code

export interface MenuItem {
 title: string;
 titleM: string;
 component: any;
 needConnection?: boolean;
 icon: string;
}

appMenuItems: MenuItem[] =
   [   {"title": "Home",  "titleM": "ഹോം", "component": HomePage,"icon": "home" },
       {"title": "Govt Orders","titleM": "സര്‍ക്കാര്‍ ഉത്തരവുകള്‍ ","component": GosearchPage, "icon": "search", needConnection: true },
       {"title": "Inward, file status","titleM": " ഇൻവേർഡ്, ഫയൽ സ്റ്റാറ്റസ്  ","component": FilestatusPage, "icon": "paper", needConnection: true },
       {"title": "e Pay Building Tax","titleM": "ഇ പേയ്മെന്റു കെട്ടിട നികുതി", "component": PropertyTaxSettingsPage,"icon": "card", needConnection: true},
       {"title": "Certificates (Birth/Death/Marriage)","titleM": "സര്‍ട്ടിഫിക്കറ്റുകള്‍ (ജനന/മരണ,വിവാഹം)", "component": CrSelectRegTypePage,"icon": "md-download", needConnection: true},
       {"title": "Project Plan","titleM": "പ്രൊജക്റ്റ്  പ്ളാൻ", "component": ProjectplanPage,"icon": "calendar", needConnection: true},
       {"title": "Building Status","titleM": "ബിൽഡിംഗ്  സ്റ്റാറ്റസ്", "component": BuildingPermitstatusPage,"icon": "search", needConnection: true },
       {"title": "Ownership Certificate","titleM": "ഓണർഷിപ്പ്  സർട്ടിഫിക്കറ്റ്", "component": OwnershipCertificatePage,"icon": "star", needConnection: true },
       {"title": "Certificates (Birth/Death/Marriage)","titleM": "സര്‍ട്ടിഫിക്കറ്റുകള്‍ (ജനന/മരണ/വിവാഹം)   ", "component": CrSelectRegTypePage,"icon": "md-download", needConnection: true},
    ];

i call in app.html as

<div *ngIf="language">
       <button  menuClose ion-item *ngFor="let menuItem of appMenuItems" (click)="openPage(menuItem)">
         <ion-icon item-left [name]="menuItem.icon"></ion-icon>
                {{menuItem.titleM|translate}}
                     
       </button>
       
     </div>

but when i alert the page parameter
i did not get ‘component’ value
all others are there like ‘icon’, ‘title’ etc… as shown in screenshot

mwt

Whats’ the problem may be ?

Please advise

Thanks

Anes

2

@anespa The component types (classes) ends up becoming javascript functions when your ts files are transpiled, and functions are not serializable.

So, if you call JSON.stringify(menuItem) the resulting string won’t have the function (for obvious reasons).

You should still be able to see it with normal logs:

console.log('menuItem', menuItem);

If you expand the object in your browser inspector you should be able to see the component property.

3

Then how to take that value in my .ts file ? Please explain

4

@anespa Try this:

openPage(menuItem) {
    console.log('called', menuItem);
    //...
}