projects/web-mev/src/app/features/workspace-detail/components/dialogs/preview-dialog/preview-dialog.component.ts
Preview Workspace Resource Dialog Component
Modal dialog component which is used to preview resource content
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | mev-preview-dialog |
| styleUrls | ./preview-dialog.component.scss |
| templateUrl | ./preview-dialog.component.html |
Properties |
|
Methods |
constructor(dialogRef: MatDialogRef
|
|||||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onNoClick |
onNoClick()
|
|
Function is triggered when user clicks the Cancel button
Returns :
void
|
| submit |
submit()
|
|
Returns :
void
|
| Public data |
Type : any
|
Decorators :
@Inject(MAT_DIALOG_DATA)
|
| Public dialogRef |
Type : MatDialogRef<PreviewDialogComponent>
|
| previewData |
Type : any
|
import {
Component,
OnInit,
ChangeDetectionStrategy,
Inject
} from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
/**
* Preview Workspace Resource Dialog Component
*
* Modal dialog component which is used to preview resource content
*/
@Component({
selector: 'mev-preview-dialog',
templateUrl: './preview-dialog.component.html',
styleUrls: ['./preview-dialog.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class PreviewDialogComponent implements OnInit {
previewData: any;
constructor(
public dialogRef: MatDialogRef<PreviewDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {}
ngOnInit(): void {
this.previewData = this.data.previewData;
}
/**
* Function is triggered when user clicks the Cancel button
*
*/
onNoClick(): void {
this.dialogRef.close();
}
submit() {
// empty stuff
}
}
<h3>Preview the data </h3>
<p>
Please check that the parsing of the file worked correctly and is formatted properly. <br>
Also, please note that some Resource types do not support a preview.
</p>
<table *ngIf="(previewData | json) != '{}'">
<thead>
<tr>
<th></th>
<th class="column-header" *ngFor="let column of previewData.columns">
{{column}}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of previewData.rows; index as i">
<td class="row-header"> {{ row }} </td>
<td *ngFor="let column of previewData.columns; index as j">
{{ previewData.values[i][j] }}
</td>
</tr>
</tbody>
</table>
<div *ngIf="(previewData | json) == '{}'" class="no-results">
No preview is available
</div>
<div mat-dialog-actions class="btn-group">
<button mat-button (click)="onNoClick()" mat-raised-button color="accent">Close</button>
</div>
./preview-dialog.component.scss
table,
th,
td {
border: 1px solid #333;
padding: 5px;
text-align: center;
font-size: 14px;
}
.column-header,
.row-header {
font-weight: bold;
}
.no-results {
color: red;
font-weight: bold;
}
.btn-group {
margin-top: 25px;
}