File
Implements
Metadata
styleUrls |
./workspace.component.css |
templateUrl |
./workspace.component.html |
Methods
ngOnDestroy
|
ngOnDestroy()
|
|
|
Private
routingSubscription
|
Type : Subscription
|
Default value : null
|
|
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { WorkspaceDataService } from './workspacedata.service';
import { BackendService } from './backend.service';
import { MainDataService } from '../maindata.service';
@Component({
templateUrl: './workspace.component.html',
styleUrls: ['./workspace.component.css']
})
export class WorkspaceComponent implements OnInit, OnDestroy {
private routingSubscription: Subscription = null;
constructor(
private route: ActivatedRoute,
private bs: BackendService,
public mds: MainDataService,
public wds: WorkspaceDataService
) { }
ngOnInit(): void {
setTimeout(() => {
this.mds.appSubTitle$.next('');
this.routingSubscription = this.route.params.subscribe(params => {
this.wds.wsId = params.ws;
this.bs.getWorkspaceData(this.wds.wsId).subscribe(wsData => {
if (typeof wsData !== 'number') {
this.wds.wsName = wsData.name;
this.wds.wsRole = wsData.role;
this.mds.appSubTitle$.next(`Verwaltung "${this.wds.wsName}" (${this.wds.wsRole})`);
}
});
});
});
}
ngOnDestroy(): void {
if (this.routingSubscription !== null) {
this.routingSubscription.unsubscribe();
}
}
}
<div class="page-header">
<p>{{mds.appTitle$ | async}} {{mds.appSubTitle$ | async}}</p>
</div>
<div class="page-body">
<div class="adminbackground">
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of wds.navLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{link.label}}
</a>
</nav>
<router-outlet></router-outlet>
</div>
</div>
#buttonsContainer {
color: white;
padding: 0 10px 0 0;
}
#buttonsContainer .material-icons {
font-size: 2.0rem;
}
#buttonsContainer img {
width: 100px;
}
mat-toolbar {
position: fixed;
z-index: 100;
top: 4px;
right: 90px;
}
#buttonsContainer .material-icons {
position: relative;
top: -8px;
font-size: 36px;
padding: 2px;
}
.adminbackground {
flex: 10 0 900px;
box-shadow: 5px 10px 20px black;
background-color: white;
min-height: 85%;
margin: 15px;
padding: 25px;
}
Legend
Html element with directive