Passing directive to a modal form

Ionic Framework ionic-v3
1

Hi All,

I’m trying to load a component inside my modal form. But I cannot figure out how to pass a directive to a modal form.

below is my code

import { Component } from '@angular/core';
import {Modal, Platform, NavParams, NavController,ViewController} from 'ionic-angular';
import {SearchResult} from '../../components/search-result/search-result';

@Component({
  selector: 'review-beer',
  templateUrl: 'build/components/review-beer/review-beer.html',
  inputs: ['beer'],
})
export class ReviewBeer {

  beer: any;

  constructor(private nav: NavController) {

  }

  showModal(){
     let modal = Modal.create(ReviewContentPage, {'beer': this.beer});
     this.nav.present(modal);
  }
}

@Component({
  templateUrl: 'build/components/review-beer/modal.html',
  directives: [SearchResult]

})
class ReviewContentPage{

   private beer: any;

   constructor(
     public platform: Platform,
     public params: NavParams,
     public viewCtrl: ViewController
   ){
     this.beer = params.get('beer');
   }

   dismiss(){
      this.viewCtrl.dismiss();
   }
}


#search results.ts
import { Component } from '@angular/core';
import {Rating} from '../../components/rating/rating';
import {ReviewBeer} from '../../components/review-beer/review-beer';

@Component({
  selector: 'search-result',
  templateUrl: 'build/components/search-result/search-result.html',
  inputs: ['beer'],
  directives: [Rating, ReviewBeer],
})
export class SearchResult {

  beer: any;

  constructor() {
  }
}

#search-result.html
<ion-avatar item-left>
  <img [src]="beer.beer_image.url">
</ion-avatar>
<h2>{{beer.name_display}}</h2>
<rating [rating_summary]="beer.review_summary"></rating>
<review-beer [beer]="beer"></review-beer>

and in the modal view

<search-result [beer]="beer"></search-result>

This is the error I’m getting

browser_adapter.js:77 EXCEPTION: Error: Uncaught (in promise): Unexpected directive value 'undefined' on the View of component 'ReviewContentPage'

but if I remove the directives: [SearchResult], it works fine.

Can someone help me on understanding if this is possible or what I’m doing wrong

thanks in advance

cheers

Sam

2

Probably would also need to see the SearchResult code and how it’s used in the template.

3

Hey @rapropos, Thanks for the reply, I updated my question with code related to search-results.ts and html ^^