components/content/content.component.ts
Main content for application with tabs:
selector | app-content |
imports |
MatTabGroup
MatTab
MatTabContent
PlotsComponent
CurveDataComponent
SpectrumDataComponent
|
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 service has been called and has 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 {CurveDataComponent} from '../curve-data/curve-data.component';
import {PlotsComponent} from '../plots/plots.component';
import {SpectrumDataComponent} from '../spectrum-data/spectrum-data.component';
/**
* Main content for application with tabs:
* - Plots tab: show static hazard plots
* - Hazard data tab: table of hazard data
* - Spectra data tab: table of spectra data
*/
@Component({
imports: [
MatTabGroup,
MatTab,
MatTabContent,
PlotsComponent,
CurveDataComponent,
SpectrumDataComponent,
],
selector: 'app-content',
styleUrl: './content.component.scss',
templateUrl: './content.component.html',
})
export class ContentComponent {
/** Whether service has been called and has 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>
<!-- Hazard data tab -->
<mat-tab
labelClass="hazard-tab"
label="Hazard Curve Data"
[disabled]="hasData() === false"
>
<ng-template matTabContent>
<app-curve-data />
</ng-template>
</mat-tab>
<!-- Spectra data tab -->
<mat-tab
labelClass="spectra-tab"
label="Response Spectrum Data"
[disabled]="hasData() === false"
>
<ng-template matTabContent>
<app-spectrum-data />
</ng-template>
</mat-tab>
</mat-tab-group>