feat(angular): support id input

nolimits4web · Apr 28, 2021 · ad51e32 · ad51e32
1 parent 434a19c
commit ad51e32
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 2 deletions.
diff --git a/playground/angular/src/app/app.component.html b/playground/angular/src/app/app.component.html
@@ -10,6 +10,7 @@
       [centeredSlides]="true"
       navigation
       class="mySwiper"
+      id="mySwiperID"
     >
       <ng-template swiperSlide *ngFor="let slide of virtualSlides; index as i"
         >Slide {{ slide }}</ng-template

diff --git a/playground/angular/src/app/app.component.scss b/playground/angular/src/app/app.component.scss
@@ -4,5 +4,9 @@
 
 .mySwiper {
   background: #ccc;
-  padding: 2 0px 0;
+  padding: 30px 0;
+}
+
+#mySwiperID {
+  border: 1px solid red;
 }
diff --git a/src/angular/src/swiper.component.html b/src/angular/src/swiper.component.html
@@ -5,7 +5,7 @@
 </ng-container>
 <div *ngIf="scrollbar && showScrollbar" class="swiper-scrollbar" #scrollbarElRef></div>
 <div *ngIf="pagination && showPagination" class="swiper-pagination" #paginationElRef></div>
-<div [ngClass]="[wrapperClass, class].join(' ')">
+<div [ngClass]="[wrapperClass, class].join(' ')" [attr.id]="id">
   <ng-content select="[slot=wrapper-start]"></ng-content>
   <ng-template
     *ngTemplateOutlet="

diff --git a/src/angular/src/swiper.component.ts b/src/angular/src/swiper.component.ts
@@ -162,6 +162,7 @@ export class SwiperComponent implements OnInit {
   @Input() thumbs: SwiperOptions['thumbs'];
   @Input() zoom: SwiperOptions['zoom'];
   @Input() class: string;
+  @Input() id: string;
   @Input()
   set navigation(val) {
     const currentNext = typeof this._navigation !== 'boolean' ? this._navigation?.nextEl : null;