import { AfterViewInit , Attribute , Component , ContentChildren , ElementRef , OnInit , QueryList , Renderer2 , ViewEncapsulation , } from '@angular/core' ; import { ImageComparison } from './image-comparison' ; @ Component ( { selector : 'ngx-image-comparison' , templateUrl : './image-comparison.component.html' , styleUrls : [ './image-comparison.component.scss' ] , encapsulation : ViewEncapsulation . None , } ) export class ImageComparisonComponent implements AfterViewInit , OnInit { @ ContentChildren ( 'comparisonImage' ) comparisonImages : QueryList < any > ; constructor ( @ Attribute ( 'startPosition' ) public readonly startPosition , private hostElement , private renderer ) { } ngOnInit ( ) { } ngAfterViewInit ( ) { this . comparisonImages . forEach ( ( element ) => { this . renderer . addClass ( element . nativeElement , 'comparison-image' ) ; } ) ; this . createImageComparison ( ) ; } private createImageComparison ( ) { const comparison = new ImageComparison ( { container : this . hostElement . nativeElement , startPosition : this . startPosition || 50 , data : this . comparisonImages . map ( ( element ) => { return { image : element . nativeElement , label : element . nativeElement . dataset . label , } ; } ) , } ) ; } }