title: ion-picker outside the modal and inside the inline page
body: <p>I would like a feature to enable the inclusion of the ion-picker component within the content of a page without the need to open it in a modal, I managed to implement this feature with ion-datetime but it only works with dates, years and months and I want to use ion-picker to create an ios-style select and only that with ion-picker I can create but it only opens in modal, is this feature currently possible or could it be developed?</p>
  <p><a href="https://i.stack.imgur.com/0uHYQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0uHYQ.jpg" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/5KS1g.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5KS1g.jpg" alt="enter image description here" /></a></p>
  <p>I am currently using the following code in angular/ionic 6</p>
  <p><strong>home.page.html</strong></p>
  <pre><code>&lt;ion-content&gt;
    &lt;ng-container &gt;
  
      &lt;ion-button expand=&quot;block&quot; (click)=&quot;showPickerController()&quot;&gt;Show Picker Controller&lt;/ion-button&gt;
  
      &lt;ion-list&gt;     
        &lt;ng-container *ngFor=&quot;let type of ['year']&quot;&gt;   
              &lt;ion-item slot=&quot;header&quot;&gt;
                &lt;ion-label&gt;ion-datetime&lt;/ion-label&gt;
                &lt;ion-text slot=&quot;end&quot;&gt;&lt;/ion-text&gt;
              &lt;/ion-item&gt;
              &lt;ion-datetime
                size=&quot;cover&quot;
                slot=&quot;content&quot;
                [presentation]=&quot;type&quot;
              &gt;
              &lt;/ion-datetime&gt;
        &lt;/ng-container&gt;
      &lt;/ion-list&gt;
    &lt;/ng-container&gt;
  &lt;/ion-content&gt;
  </code></pre>
  <p><strong>home.page.ts</strong></p>
  <pre><code>import { Component } from '@angular/core';
  import { PickerController, PickerOptions } from '@ionic/angular';
  
  
  @Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
    
  })
  export class HomePage {
  
  
    constructor(private pickerCtrl: PickerController) {}
  
    async showPickerController() {
      let opts: PickerOptions = {
        buttons: [
          {
            text: 'Ok'
          }
        ],
        columns: [
          {
            name: 'category',
            options: [
              { text: 'Dog', value: 'dog' },
              { text: 'Cat', value: 'cat' },
              { text: 'Fish', value: 'fish' },
              { text: 'Rabbit', value: 'rabbit' },
            ]
          }
        ]
      };
      
      let picker = await this.pickerCtrl.create(opts);
      picker.present();
      picker.onDidDismiss().then(async data =&gt; {
        console.log('dismiss');
      });
    }
  }
  </code></pre>