components/content/content.component.ts
Main application content with Angular material tabs including:
selector | app-content |
imports |
MatTabGroup
MatTab
MatTabContent
PlotsComponent
LogicTreeComponent
DataComponent
|
templateUrl | ./content.component.html |
styleUrl | ./content.component.scss |
Properties |
constructor(service: AppService)
|
||||||
Defined in components/content/content.component.ts:30
|
||||||
Parameters :
|
hasData |
Default value : computed(() => this.service.serviceResponse() !== null)
|
Defined in components/content/content.component.ts:30
|
Whether a service has been called and there is data |
Public service |
Type : AppService
|
Defined in components/content/content.component.ts:32
|
import {Component, computed} from '@angular/core';
import {MatTab, MatTabContent, MatTabGroup} from '@angular/material/tabs';
import {AppService} from '../../services/app.service';
import {DataComponent} from '../data/data.component';
import {LogicTreeComponent} from '../logic-tree/logic-tree.component';
import {PlotsComponent} from '../plots/plots.component';
/**
* Main application content with Angular material tabs including:
* - Plots tab: Plots the MFD
* - Logic tree tab: Plot the MFD logic tree using tree plot
* - Data tab: table of MFD data
*/
@Component({
imports: [
MatTabGroup,
MatTab,
MatTabContent,
PlotsComponent,
LogicTreeComponent,
DataComponent,
],
selector: 'app-content',
styleUrl: './content.component.scss',
templateUrl: './content.component.html',
})
export class ContentComponent {
/** Whether a service has been called and there is data */
hasData = computed(() => this.service.serviceResponse() !== null);
constructor(public service: AppService) {}
}
<mat-tab-group class="height-full">
<!-- Plots tab -->
<mat-tab labelClass="plots-tab" label="Plots">
<ng-template matTabContent>
<app-plots />
</ng-template>
</mat-tab>
<!-- Logic tree tab -->
<mat-tab
labelClass="logic-tree-tab"
label="Logic Tree"
[disabled]="hasData() === false"
>
<ng-template matTabContent>
<app-logic-tree />
</ng-template>
</mat-tab>
<!-- Data tab -->
<mat-tab
labelClass="data-tab"
label="MFD Data"
[disabled]="hasData() === false"
>
<ng-template matTabContent>
<app-data />
</ng-template>
</mat-tab>
</mat-tab-group>