Ionic 4 modal

Hello,

I was trying to create modal using ionic 4, i am getting an error
No component factory found for DetailsPagePage., Uncaught (in promise),

below is my code

search.module.ts


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { SearchPage } from './search.page';

const routes: Routes = [
  {
    path: '',
    component: SearchPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
  ],
  declarations: [SearchPage]
})
export class SearchPageModule {}

> **and this is **search.page.ts code**

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { DetailsPagePage } from '../details-page/details-page.page';


@Component({
  selector: 'app-search',
  templateUrl: './search.page.html',
  styleUrls: ['./search.page.scss'],
})
export class SearchPage implements OnInit {

  constructor(private modalController: ModalController) { }

  ngOnInit() {
  }

  async openModal() {
    const modal = await this.modalController.create({
      component: DetailsPagePage,
    });
    return await modal.present();
  }
}

on click of below ionic view i want to open the modal that is produt details page

    <div class="custom_cards" (click)="openModal()">
      <ion-item>
          <ion-avatar slot="start" class="fish_image">
              <img src="assets/images/fish.png">
          </ion-avatar>
          <ion-label>
              <h3 class="dish_name">Indian Rowas</h3>
              <p class="order_status">SAR 100</p>
              <p class="order_date">Rating : ⭐⭐⭐⭐⭐</p>
              <ion-button color="primary" size="small" fill="outline" class="add_btn">Add</ion-button>
          </ion-label>
      </ion-item>
    </div>

please help me out…

If you follow this tutorial

you should get it working.

1 Like

Thanks man @alex796 It works.