File

components/about/about.component.ts

Description

About page for data mapping application.

Metadata

Constructor

constructor()
import {Component} from '@angular/core';
import {MatSlideToggle} from '@angular/material/slide-toggle';
import {
  NshmpLibNgAboutContentComponent,
  NshmpLibNgAboutDescriptionComponent,
  NshmpLibNgAboutDescriptionTitleComponent,
  NshmpLibNgAboutHeaderControlsComponent,
  NshmpLibNgAboutLeafletComponent,
  NshmpLibNgAboutUsingApplicationExpansionPanelComponent,
} from '@ghsc/nshmp-lib-ng/about';

/**
 * About page for data mapping application.
 */
@Component({
  imports: [
    NshmpLibNgAboutContentComponent,
    NshmpLibNgAboutDescriptionComponent,
    NshmpLibNgAboutDescriptionTitleComponent,
    NshmpLibNgAboutUsingApplicationExpansionPanelComponent,
    NshmpLibNgAboutHeaderControlsComponent,
    NshmpLibNgAboutLeafletComponent,
    MatSlideToggle,
  ],
  selector: 'app-about',
  styleUrl: './about.component.scss',
  templateUrl: './about.component.html',
})
export class AboutComponent {
  constructor() {}
}
<nshmp-lib-ng-about-content [showSavingSettingPanel]="false">
  <nshmp-lib-ng-about-description>
    <nshmp-lib-ng-about-description-title>
      This application provides graphic representations of USGS national seismic
      hazard model (NSHM) components.
    </nshmp-lib-ng-about-description-title>
  </nshmp-lib-ng-about-description>

  <!-- Using this application panel -->
  <nshmp-lib-ng-about-using-application-expansion-panel>
    <!-- About the header controls -->
    <nshmp-lib-ng-about-header-controls type="MAP" [showSettingsIcon]="false" />

    <!-- About the control panel -->
    <div>
      <h3>Control Panel</h3>

      <p>
        The control panel contains all form fields to add layers associated with
        a NSHM to the map.
      </p>

      <ul class="icon-list">
        <li>
          <div>
            <mat-slide-toggle color="primary" />
          </div>

          <span> Click on the toggle to toggle visibility of that layer. </span>
        </li>
      </ul>
    </div>

    <!-- About Leaflet -->
    <nshmp-lib-ng-about-leaflet />
  </nshmp-lib-ng-about-using-application-expansion-panel>
</nshmp-lib-ng-about-content>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""