Skip to content

Commit

Permalink
Solution for lab #7 - ngSwitch
Browse files Browse the repository at this point in the history
  • Loading branch information
alcfeoh committed Jan 19, 2018
1 parent 5d5a760 commit 367df25
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 15 deletions.
2 changes: 1 addition & 1 deletion src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<app-navigation></app-navigation>

<main role="main">
<app-jumbotron title="Welcome to our store" description="Browse our collection of license plates below"></app-jumbotron>
<app-carousel></app-carousel>

<div class="container">
<div class="row" >
Expand Down
16 changes: 6 additions & 10 deletions src/app/carousel/carousel.component.html
Original file line number Diff line number Diff line change
@@ -1,20 +1,16 @@
<div class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<!--<app-jumbotron title="Welcome to our store" description="Browse our collection of license plates below"></app-jumbotron> -->
</div>
<div class="carousel-item">
<!--<app-jumbotron title="We have 20,000 plates" description="From all 50 US states, all years available"></app-jumbotron> -->
</div>
<div class="carousel-item">
<!--<app-jumbotron title="Browse our collection" description="Use the search box to find the plate you're looking for"></app-jumbotron> -->
<div [ngSwitch]="slide" class="carousel-item active">
<app-jumbotron *ngSwitchCase="0" title="Welcome to our store" description="Browse our collection of license plates below"></app-jumbotron>
<app-jumbotron *ngSwitchCase="1" title="We have 20,000 plates" description="From all 50 US states, all years available"></app-jumbotron>
<app-jumbotron *ngSwitchCase="2" title="Browse our collection" description="Use the search box to find the plate you're looking for"></app-jumbotron>
</div>
</div>
<a class="carousel-control-prev" role="button">
<a class="carousel-control-prev" role="button" (click)="previousSlide()">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" role="button">
<a class="carousel-control-next" role="button" (click)="nextSlide()">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
Expand Down
16 changes: 12 additions & 4 deletions src/app/carousel/carousel.component.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,23 @@
import { Component, OnInit } from '@angular/core';
import { Component } from '@angular/core';

@Component({
selector: 'app-carousel',
templateUrl: './carousel.component.html',
styleUrls: ['./carousel.component.css']
})
export class CarouselComponent implements OnInit {
export class CarouselComponent {

constructor() { }
slide = 0;

ngOnInit() {
constructor() {
setInterval(() => this.nextSlide(), 5000);
}

nextSlide() {
this.slide = (this.slide + 1) % 3 ;
}

previousSlide() {
this.slide = (this.slide === 0 ? 2 : this.slide -1);
}
}

0 comments on commit 367df25

Please sign in to comment.