Disaggregation Application
  1. Components
  2. ContentComponent

File

components/content/content.component.ts

Description

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

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
selector app-content
imports MatTabGroup MatTab PlotsComponent CurveDataComponent SpectrumDataComponent NshmpScrollToTopComponent MatTabContent
templateUrl ./content.component.html
styleUrl ./content.component.scss

Index

Properties

Properties

hasData
Default value : computed(() => this.service.serviceResponse() !== null)
Defined in components/content/content.component.ts:36

Whether service has been called and has data
service
Default value : inject(AppService)
Defined in components/content/content.component.ts:33
 
import {ChangeDetectionStrategy, Component, computed, inject} from '@angular/core';
import {MatTab, MatTabContent, MatTabGroup} from '@angular/material/tabs';
import {NshmpScrollToTopComponent} from '@ghsc/nshmp-lib-ng/nshmp';

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({
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {id: 'hazard-static-content'},
  imports: [
    MatTabGroup,
    MatTab,
    PlotsComponent,
    CurveDataComponent,
    SpectrumDataComponent,
    NshmpScrollToTopComponent,
    MatTabContent,
  ],
  selector: 'app-content',
  styleUrl: './content.component.scss',
  templateUrl: './content.component.html',
})
export class ContentComponent {
  service = inject(AppService);

  /** Whether service has been called and has data */
  hasData = computed(() => this.service.serviceResponse() !== null);
}

<mat-tab-group class="height-full">
  <!-- Plots tab -->
  <mat-tab labelClass="plots-tab" label="Plots">
    <ng-template matTabContent>
      <nshmp-scroll-to-top>
        <app-plots />
      </nshmp-scroll-to-top>
    </ng-template>
  </mat-tab>

  <!-- Hazard data tab -->
  <mat-tab labelClass="hazard-tab" label="Hazard Curve Data" [disabled]="hasData() === false">
    <div class="grid-container-widescreen">
      <app-curve-data />
    </div>
  </mat-tab>

  <!-- Spectra data tab -->
  <mat-tab labelClass="spectra-tab" label="Response Spectrum Data" [disabled]="hasData() === false">
    <div class="grid-container-widescreen">
      <app-spectrum-data />
    </div>
  </mat-tab>
</mat-tab-group>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""