src/app/crud/crud.component.ts
| selector | app-crud |
| styleUrls | ./crud.component.scss |
| templateUrl | ./crud.component.html |
Properties |
Methods |
constructor(route: ActivatedRoute, querries: QueryService)
|
|||||||||
|
Defined in src/app/crud/crud.component.ts:10
|
|||||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/crud/crud.component.ts:22
|
|
Returns :
void
|
| component |
Type : String
|
|
Defined in src/app/crud/crud.component.ts:20
|
| crudurl |
Type : string
|
Default value : '/crud'
|
|
Defined in src/app/crud/crud.component.ts:18
|
| datasets |
Default value : Object.keys(this.querries.datasets)
|
|
Defined in src/app/crud/crud.component.ts:17
|
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { QueryService } from './query.service';
@Component({
selector: 'app-crud',
templateUrl: './crud.component.html',
styleUrls: ['./crud.component.scss']
})
export class CrudComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private querries: QueryService
) { }
datasets = Object.keys(this.querries.datasets);
crudurl = '/crud';
component: String;
ngOnInit(): void {
this.route.params.subscribe((params) => {
this.component = params.component;
});
}
}
<div class="page">
<div class="sidebar" style="margin-top: 50px;margin-right: 10px;">
<div *ngFor="let ds of datasets" style="margin-bottom: 1px">
<button type="button" class="btn btn-secondary btn-block"
[routerLink]="[crudurl, 'dataset', ds]">
{{ ds }}
</button>
</div>
</div>
<div class="page-content">
<app-dataset *ngIf="component === 'dataset'"></app-dataset>
<app-form *ngIf="component === 'form'"></app-form>
<div *ngIf="component !== 'dataset' && component !== 'form'">
Unknown Component {{ component }}
</div>
</div>
</div>
./crud.component.scss
.page {
display: table;
width: 100%;
}
.page-content,
.sidebar {
display: table-cell;
}
.sidebar {
width: 150px;
}