File
Implements
Metadata
| selector |
library-document |
| styleUrls |
./library-document.component.scss |
| templateUrl |
./library-document.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
Public
imageError
|
imageError()
|
|
|
|
|
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'library-document',
templateUrl: './library-document.component.html',
styleUrls: ['./library-document.component.scss']
})
export class LibraryDocumentComponent implements OnInit {
@Input() document;
imageUrl: string;
constructor() { }
ngOnInit() {
if (this.document.image_url && this.document.image_url.length > 0) {
this.imageUrl = this.document.image_url;
} else {
this.imageUrl = 'v2/assets/img/no-image.png';
}
}
public imageError() {
this.imageUrl = 'v2/assets/img/no-image.png';
}
}
<div class="card document-box">
<div class="lib-image">
<a [href]="document.url" target="_blank">
<img class="card-img-top" [src]="imageUrl" [alt]="" (error)="imageError()"/>
</a>
</div>
<div class="card-body">
<div class="card-title">
<a [href]="document.url" target="_blank" [innerHTML]="document.title"></a>
</div>
</div>
</div>
@import "src/app/styles/helpers";
.card {
border: none;
box-shadow: $box-shadow-sm;;
text-decoration: none;
height: 100%;
&:hover {
box-shadow: $box-shadow-sm-hover;
transition: 0.3s;
}
.lib-image {
display: flex;
position: relative;
width: 100%;
border-bottom: 1px solid $off-white;
@include aspect-ratio(3 4, 'a > img');
a {
display: block;
&:after {
content: none;
}
}
.card-img-top {
object-fit: cover;
object-position: top;
}
}
&-body {
background-color: whitesmoke;
}
&-title {
color: $blue;
@include font-scale(18, bold);
a[target=_blank]:after {
content: none;
}
}
}
Legend
Html element with directive