src/app/components/doi/doi.component.ts
OnInit
selector | app-doi |
styleUrls | ./doi.component.scss |
templateUrl | ./doi.component.html |
Properties |
Methods |
constructor(data: DOI[], sheetRef: MatBottomSheetRef)
|
|||||||||
Defined in src/app/components/doi/doi.component.ts:14
|
|||||||||
Parameters :
|
close |
close()
|
Defined in src/app/components/doi/doi.component.ts:35
|
Returns :
void
|
Public data |
Type : DOI[]
|
Decorators :
@Inject(MAT_BOTTOM_SHEET_DATA)
|
Defined in src/app/components/doi/doi.component.ts:16
|
error |
Type : Error
|
Default value : { hasError: false }
|
Defined in src/app/components/doi/doi.component.ts:14
|
loading |
Default value : true
|
Defined in src/app/components/doi/doi.component.ts:12
|
noId |
Default value : false
|
Defined in src/app/components/doi/doi.component.ts:13
|
Public sheetRef |
Type : MatBottomSheetRef
|
Defined in src/app/components/doi/doi.component.ts:17
|
import { Component, Inject, OnInit } from '@angular/core';
import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef } from '@angular/material/bottom-sheet';
import { Error } from '../../models/response.model';
import { DOI } from '../../models/sheet.model';
@Component({
selector: 'app-doi',
templateUrl: './doi.component.html',
styleUrls: ['./doi.component.scss'],
})
export class DoiComponent implements OnInit {
loading = true;
noId = false;
error: Error = { hasError: false };
constructor(
@Inject(MAT_BOTTOM_SHEET_DATA) public data: DOI[],
public sheetRef: MatBottomSheetRef,
) {}
ngOnInit(): void {
this.loading = false;
/**
* Trimming the intial part of the doi property as it as "DOI: " in its respective property.
*/
this.data = this.data.map((item) => {
console.log(item);
if (item.doi.toUpperCase().search('DOI') === 0) {
item.doi = item.doi.substring(5);
}
return item;
});
}
close() {
this.sheetRef.dismiss();
}
}
<div class="p-2">
<div class="w-100 d-flex justify-content-between align-items-center border-bottom pb-2">
<div>
<span class="h5">DOI Details</span>
</div>
<div>
<button mat-icon-button (click)="close()">
<mat-icon>close</mat-icon>
</button>
</div>
</div>
<div>
<div *ngIf="!error.hasError" class="py-3 px-2 doi">
<div *ngFor="let item of data; index as i">
<label><strong>DOI: </strong></label>
<span>
{{ item.doi }}
</span>
<div class="pt-1"></div>
<label><strong>Id: </strong></label>
<span>
{{ item.id }}
</span>
<div class="pt-1"></div>
<label><strong>Notes: </strong></label>
<span>
{{ item.notes }}
</span>
<hr />
</div>
</div>
</div>
</div>
./doi.component.scss
.doi {
max-height: 18.75rem;
overflow: auto;
}
.loading-wait {
width: 10%;
}