trjhtr

I'm looking for feedback on my Slideshow / intro reel made with Angular and Typescript. As I developed it I ended up using a lot of Typescript and a small bit of Data binding on the HTML. I also used Angular Animations for the transitions. I'm wondering if there any shorter more efficient way I could've developed this.

I'm just worried as this was a messy way to write this up. I am happy with the HTML and Angular animations, but I welcome any criticisms:

@Component(
selector: 'app-slideshow',
template: `<div id="slideshow">

<div class="slide" [@imageState]="slideImage" (click)="nextSlide()" >
 <p [@textState]="slideText"> slides[index].text </p>
 <div *ngIf="this.index === 2" id="pageLinks">
 <button class="btn btn-default" type="submit">Portfolio</button>
 <button class="btn btn-default" type="submit">Blog/Education</button>
</div>

</div>
</div>
<app-projects>
</app-projects>

`,
 styleUrls: ['./slideshow.component.css'],
 animations: [
 trigger('textState', [
 state('show', style(
 'opacity' : '1',
 )),
 state('hide', style(
 'opacity' : '0',
 )),
 transition('show => hide', animate('1000ms ease-out')),
 transition('hide => show', animate('600ms ease-in'))
 ]),
 trigger('imageState', [
 state('image0', style(
 'background-color': 'red',
 )),
 state('image1', style(
 'background-color': 'green',
 )),
 state('image2', style(
 'background-color': 'blue',
 )),
 transition('* => *', animate('600ms ease-out')),
 ])
 ]
 )

The slideshow has three slides in which stops at the 3rd slide and 2 links appear on the third slide. I used Animations to transition the background colours as well as the text. Most of the changes happen within one function: nextSlide().

The function iterates through an array of objects. Each slide has an id number and string, marking each slide. The ID number is to match with the array number.
nextSlide() also triggers the animations, and disables itself on the the last slide.

export class SlideshowComponent implements OnInit

 slideText = 'show';
 slideImage = 'image0';
 disableSlide = false;
 showLinks=true;
 //imageNumber = 0;

 public slides = [
 
 id: 0,
 text: 'hello there',
 ,
 
 id: 1,
 text: 'gooble gobble',
 ,
 
 id: 2,
 text: 'one of us',
 
 ];

 constructor() 


 index = 0;

 nextSlide(id) 
 if(this.disableSlide === false) 
 this.slideImage = 'image' + (this.index + 1); //slide image changes
 this.slideText = 'hide'; //slide text is hidden before it changes
 if(this.slideText === 'hide')
 setTimeout(()=> this.index ++;//slide text changes
 if(this.index === 2) 
 this.disableSlide = true;
 
 this.slideText = 'show', 1000); //new slide text is shown

 

 ngOnInit() 

I'm looking for any feedback on how I could have written it better. Could I have used Angular's data binding tools more often? Should I have separated the typescript code into different functions?