fix(slides): set class using renderer instead of host

fixes #6275

Author: brandyscarney

ionic/components/slides/slides.ts

@@ -1,4 +1,4 @@
-import {Directive, Component, ElementRef, Host, EventEmitter, Input, Output, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
+import {Directive, Component, ElementRef, Renderer, Host, EventEmitter, Input, Output, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
 import {NgClass} from 'angular2/common';
 
 import {Ion} from '../ion';
@@ -193,9 +193,6 @@ import {Scroll} from '../scroll/scroll';
       '<div [class.hide]="!showPager" class="swiper-pagination"></div>' +
     '</div>',
   directives: [NgClass],
-  host: {
-    '[class]': 'slideId'
-  },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
@@ -340,14 +337,16 @@ export class Slides extends Ion {
   @Output() move: EventEmitter<any> = new EventEmitter();
 
 
-  constructor(elementRef: ElementRef) {
+  constructor(elementRef: ElementRef, renderer: Renderer) {
     super(elementRef);
     this.rapidUpdate = debounce(() => {
       this.update();
     }, 10);
 
     this.id = ++slidesId;
     this.slideId = 'slides-' + this.id;
+
+    renderer.setElementClass(elementRef.nativeElement, this.slideId, true);
   }
 
   /**

ionic/components/slides/test/controller/main.html

@@ -1,4 +1,4 @@
-<ion-slides #mySlider [options]="mySlideOptions" (didChange)="onSlideChanged()">
+<ion-slides #mySlider [options]="mySlideOptions" (didChange)="onSlideChanged()" class="my-slides">
   <ion-slide padding>
     <h1>Slide 1</h1>
     <button block (click)="goToPrevSlide()">Navigate Back</button>