title: Access an element's object model in angular?
body: <p>Is it possible to access an element's model from the element?</p>
  
  <h2>Background</h2>
  
  <p>I'm trying to make a change to the way Ionic's <a href="https://ionicframework.com/docs/v2/api/components/slides/Slides/" rel="nofollow noreferrer">ion slides</a> work. There is a <code>Slides</code> component and a <code>Slide</code> component, and usage is like this:</p>
  
  <pre><code>&lt;ion-slides&gt;
    &lt;ion-slide&gt; Slide 1 &lt;/ion-slide&gt;
    &lt;ion-slide&gt; Slide 2 &lt;/ion-slide&gt;
  &lt;/ion-slides&gt;
  </code></pre>
  
  <p>Each <code>Slide</code> requires a reference to it's parent <code>Slides</code>. It's implemented like this:</p>
  
  <pre><code>export var Slide = (function () {
      function Slide(elementRef, slides) {
          this.slides = slides;
          this.ele = elementRef.nativeElement;
          this.ele.classList.add('swiper-slide');
          slides.rapidUpdate();
      }
      ...
      Slide.prototype.ngOnDestroy = function () {
          this.slides.rapidUpdate();
      };
      Slide.decorators = [
          { type: Component, args: [{
                      selector: 'ion-slide',
                      template: '&lt;div class="slide-zoom"&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/div&gt;',
                      changeDetection: ChangeDetectionStrategy.OnPush,
                      encapsulation: ViewEncapsulation.None,
                  },] },
      ];
      Slide.ctorParameters = [
          { type: ElementRef, },
          { type: Slides, decorators: [{ type: Host },] },
      ];
      Slide.propDecorators = {
          'zoom': [{ type: Input },],
      };
      return Slide;
  }());
  </code></pre>
  
  <p>This means that you can't use an <code>ion-slide</code> without a <code>ion-slides</code> parent without getting a template parse error, e.g. in a custom <code>ion-slide</code> wrapper such as:</p>
  
  <pre><code>@Component({
    selector: 'myslide',
    template: '&lt;ion-slide&gt; &lt;h1&gt; Test Header &lt;/h1&gt; &lt;ng-content&gt;&lt;/ng-content&gt; &lt;/ion-slide&gt;',
  })
  export class MySlide {
    constructor() {}
  }
  </code></pre>
  
  <p>with</p>
  
  <pre><code>&lt;ion-slides&gt;
      &lt;myslide&gt; Slide 1 &lt;/myslide&gt;
      &lt;myslide&gt; Slide 2 &lt;/myslide&gt;
  &lt;/ion-slides&gt;
  </code></pre>
  
  <h2>Question</h2>
  
  <p>I'm trying to modify the ionic slides code to allow a <code>Slide</code> without a <code>Slides</code> parent by having the <code>Slides</code> pass a reference to itself to each child <code>Slide</code> after init. I can easily access the <code>ion-slide</code> DOM elements that are children of a <code>Slides</code> component, but how can I access their angular model?</p>
  
  <h2>What I tried</h2>
  
  <p>1) During <code>Slides</code> init, I can select the <code>ion-slides</code> elements just fine. How can I access the model for these elements? Really, I only need to set the <code>slides</code> model variable.</p>
  
  <pre><code>Slides.prototype.ngOnInit = function () {
      // this query works
      var slide_elems = this.getNativeElement().querySelectorAll('ion-slide');
  
      // this obviously doesn't work because
      // slides needs to be a attribute of the model,
      // not the DOM elem
      slide_elems[0].slides = this;
  </code></pre>
  
  <p>2) @matej-maloča suggested <code>ViewChild</code>. Really it looks like I need <code>ContentChildren</code>, so I added a <code>ContentChildren</code> selector to the <code>Slides</code>.</p>
  
  <pre><code>Slides.decorators = [
          { type: Component, args: [{
                      selector: 'ion-slides',
                      template: '&lt;div class="swiper-container"&gt;' +
                          '&lt;div class="swiper-wrapper"&gt;' +
                          '&lt;ng-content&gt;&lt;/ng-content&gt;' +
                          '&lt;/div&gt;' +
                          '&lt;div [class.hide]="!showPager" class="swiper-pagination"&gt;&lt;/div&gt;' +
                          '&lt;/div&gt;',
                      changeDetection: ChangeDetectionStrategy.OnPush,
                      encapsulation: ViewEncapsulation.None,
                      queries: {
                          'ionSlides': new ContentChildren(Slide)
                      },
                  },] },
      ];
  </code></pre>
  
  <p>This <em>almost</em> works. It selects <code>Slide</code> components that are in the content of the <code>ion-slides</code> element itself but <em>not</em> ones inside a container component (e.g. the custom <code>myslide</code>). Is there a way to select those nested <code>ion-slides</code> elements as well?</p>
  
  <pre><code>&lt;ion-slides&gt;
    &lt;-- selected by ContentChildren --&gt;
    &lt;ion-slide&gt;Slide 1&lt;/ion-slide&gt;
    &lt;ion-slide&gt;Slide 2&lt;/ion-slide&gt;
  
    &lt;-- the ion-slide within myslide is not selected!! --&gt;
    &lt;myslide&gt;Slide 3&lt;/myslide&gt;
  &lt;/ion-slides&gt;
  </code></pre>
  
  <h2>Notes</h2>
  
  <p>I went looking for a link to the source for ion-slides and found <a href="https://github.com/driftyco/ionic/blob/master/src/components/slides/slides.ts" rel="nofollow noreferrer">this</a>, which is in typescript. What can I do to update the version I have in my node_modules/ionic-angular to this? Currently everything there is defined in javascript which is a little bit harder to work with.</p>