Skip to content
Permalink
Browse files

20-creating-custom-gif-component

  • Loading branch information...
sevilayha committed Nov 6, 2017
1 parent 265d41e commit b07d935a5c6b4b84a36189421e2a5befc4484b2a
@@ -9,10 +9,7 @@ import { GifService } from '@app/core/services/gif.service';
<div class="columns" *ngIf="battleGifs">
<div class="column is-half" *ngFor="let gif of battleGifs">
<div class="gif-container">
<img [src]="gif.url">
<div class="caption">{{ gif.caption }}</div>
</div>
<app-gif [url]="gif.url" [caption]="gif.caption"></app-gif>
<a
class="button is-info"
@@ -24,25 +21,6 @@ import { GifService } from '@app/core/services/gif.service';
</div>
`,
styles: [`
.gif-container {
position: relative;
}
.caption {
display: block;
position: absolute;
left: 20px;
right: 20px;
bottom: 30px;
text-align: center;
color: #FFF;
font-size: 30px;
text-transform: uppercase;
line-height: 1;
word-break: break-all;
text-shadow: 1px 1px 3px #000;
}
img {
width: 100%;
height: 300px;
@@ -7,13 +7,11 @@ import { GifService } from '@app/core/services/gif.service';
<h1 class="title has-text-centered">Create a Gif!</h1>
<div class="box">
<div class="gif-container" *ngIf="randomGif">
<!-- image -->
<img [src]="randomGif.url">
<!-- caption -->
<div class="caption">{{ caption }}</div>
</div>
<app-gif
*ngIf="randomGif"
[url]="randomGif.url"
[caption]="caption">
</app-gif>
<!-- create a caption -->
<div class="field">
@@ -30,26 +28,7 @@ import { GifService } from '@app/core/services/gif.service';
.box {
max-width: 50%;
margin: 0 auto;
}
.gif-container {
position: relative;
}
.caption {
display: block;
position: absolute;
left: 20px;
right: 20px;
bottom: 30px;
text-align: center;
color: #FFF;
font-size: 30px;
text-transform: uppercase;
line-height: 1;
word-break: break-all;
text-shadow: 1px 1px 3px #000;
}
}
.button {
display: block;
@@ -4,11 +4,13 @@ import { FormsModule } from '@angular/forms';
import { BattleComponent } from './battle/battle.component';
import { CreateComponent } from './create/create.component';
import { LeaderboardComponent } from './leaderboard/leaderboard.component';
import { SharedModule } from '@app/shared/shared.module';

@NgModule({
imports: [
CommonModule,
FormsModule
FormsModule,
SharedModule
],
declarations: [BattleComponent, CreateComponent, LeaderboardComponent]
})
@@ -0,0 +1,43 @@
import { Component, OnInit, Input } from '@angular/core';

@Component({
selector: 'app-gif',
template: `
<div class="gif-container">
<!-- image -->
<img [src]="url">
<!-- caption -->
<div class="caption">{{ caption }}</div>
</div>
`,
styles: [`
.gif-container {
position: relative;
}
.caption {
display: block;
position: absolute;
left: 20px;
right: 20px;
bottom: 30px;
text-align: center;
color: #FFF;
font-size: 30px;
text-transform: uppercase;
line-height: 1;
word-break: break-all;
text-shadow: 1px 1px 3px #000;
}
`]
})
export class GifComponent implements OnInit {
@Input() url: string;
@Input() caption: string;

constructor() {}

ngOnInit() {}

}
@@ -0,0 +1,12 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GifComponent } from './components/gif/gif.component';

@NgModule({
imports: [
CommonModule
],
declarations: [GifComponent],
exports: [GifComponent]
})
export class SharedModule { }

0 comments on commit b07d935

Please sign in to comment.
You can’t perform that action at this time.