File

components/content/content.component.ts

Description

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

Metadata

Index

Properties

Constructor

constructor(service: AppService)
Parameters :
Name Type Optional
service AppService No

Properties

hasData
Default value : computed(() => this.service.serviceResponse() !== null)

Whether a service has been called and there is data

Public service
Type : AppService
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>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""