FrontEnd Angular - v0.0.1-alpha

src/app/shared/components/slider-item/slider-item.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SliderItemComponent } from './slider-item.component';
+
+describe('SliderItemComponent', () => {
+    let component: SliderItemComponent;
+    let fixture: ComponentFixture<SliderItemComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [ SliderItemComponent ]
+        })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(SliderItemComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/shared/components/slider-item/slider-item.component.ts

@@ -0,0 +1,46 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'app-slider-item',
+    templateUrl: './slider-item.component.html',
+    styleUrls: ['./slider-item.component.css'],
+    animations:[
+        trigger('animateSliderItem',[
+            state('hide', style({
+                'opacity': '0',
+                'transform': 'translateX(150px)'
+            }),
+            {
+                params: { 
+                    fadeInTime: 600,
+                    fadeOutTime: 600 
+                }
+            }),
+            state('show', style({
+                'opacity': '1',
+                'transform': 'translateX(0px)'
+            }),
+            {
+                params: { 
+                    fadeOutTime: 600,
+                    fadeInTime: 600
+                },
+            }),
+            transition('hide => show', animate(`{{ fadeInTime }}s ease-in`)),
+            transition('show => hide', animate(`{{ fadeOutTime }}s ease-out`))
+        ])
+    ]
+})
+export class SliderItemComponent {
+
+    @Input()
+    public state:boolean = false;
+    
+    constructor() { }
+
+    get itemStatus(): string {
+        return this.state ? 'show' : 'hide';
+    }
+
+}