components/about/about.component.ts
About page for data mapping application.
selector | app-about |
imports |
NshmpLibNgAboutContentComponent
NshmpLibNgAboutDescriptionComponent
NshmpLibNgAboutDescriptionTitleComponent
NshmpLibNgAboutUsingApplicationExpansionPanelComponent
NshmpLibNgAboutHeaderControlsComponent
NshmpLibNgAboutLeafletComponent
MatSlideToggle
|
templateUrl | ./about.component.html |
styleUrl | ./about.component.scss |
constructor()
|
Defined in components/about/about.component.ts:29
|
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>