In one of my projects I’m attempting to create a list of items and once a user presses on an item, they will be navigated to a new page where the Item’s details will be shown. It’s very simple and straightforward, the Item’s name and it’s details are already written on the first page and I want them to be transferred to the next page. However I keep getting the error: Argument of type ‘{ item: any; }’ is not assignable to parameter of type 'NavigationOptions
here is my code as follows: This is the main page in where the list of all items will be shown
Html
<ion-list>
<ion-item *ngFor="let item of items" (click)="viewItem(item)"><ion-card>
<ion-card-header>
<ion-card-subtitle></ion-card-subtitle>
<ion-card-title>{{item.title}}</ion-card-title>
</ion-card-header>
<ion-card-content>
{{item.description}}
</ion-card-content>
</ion-card></ion-item>
</ion-list>
TS
export class ShoppingPage implements OnInit {
public item;
constructor( public navCtrl: NavController ) { }
ngOnInit() {
}
ionViewWillEnter(){
this.item = [
{title: 'Product 1', description: 'This is where we would would put the description of "product 1"'},
{title: 'Product 2', description: 'This is how the description of Product 2 would look'},
{title: 'Product 3', description: "Product 3 is the greatest product you can buy off the market because it's perfect"}
];
}
viewItem(item){
this.navCtrl.navigateForward('item-detail', {
item: item
});
}
}
Now here is the code of the page in where I require all the data to be shown:
html
<ion-header>
<ion-toolbar>
<ion-title>{{title}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
{{description}}
</ion-content>
TS
export class ItemDetailPage implements OnInit {
title;
description;
constructor(public navParams: NavParams) { }
ionViewDidLoad(){
this.title = this.navParams.get('item').title;
this.description = this.navParams.get('item').description;
}
ngOnInit() {
}
}
Thank you
EDIT: I am using ionic 4