About Library

About Library

Home - NSHMP Angular Library User Guide

Components to create the about page.

Contents

Example About Page

Component HTML

Example :
<nshmp-lib-ng-about-content>
    <nshmp-lib-ng-about-description-title>
      NSHMP Application
    </nshmp-lib-ng-about-description-title>

    Application description.
  </nshmp-lib-ng-description>

  <!-- Using this application panel -->
  <nshmp-lib-ng-about-using-application-expansion-panel>
    <!-- About the header controls -->
    <nshmp-lib-ng-about-header-controls></nshmp-lib-ng-about-header-controls>

    <!-- About the control panel -->
    <nshmp-lib-ng-about-control-panel></nshmp-lib-ng-about-control-panel>

    <!-- About main content -->
    <nshmp-lib-ng-about-main-content-tabs [tabInfo]="tabInfo">
    </nshmp-lib-ng-about-main-content-tabs>

    <!-- About Plotly -->
    <nshmp-lib-ng-about-plotly></nshmp-lib-ng-about-plotly>

    <!-- About settings -->
    <nshmp-lib-ng-about-settings></nshmp-lib-ng-about-settings>
  </nshmp-lib-ng-about-using-application-expansion-panel>
</nshmp-lib-ng-about-content>

Component TypeScript

Example :
import {AboutMainContentTab} from '@ghsc/nshmp-lib-ng/about';

export class MyAboutPage {
  tabInfo: AboutMainContentTab = [
    {
      tabDescription: 'Show the plot',
      tabTitle: 'Plots',
    },
    {
      tabDescription: 'Shows the data table',
      tabTitle: 'Data',
    },
  ];
}

Component Module

Example :
import {NshmpAboutModule} from '@ghsc/nshmp-lib-ng/about';

@NgModule({
  declarations: [MyAboutPage],
  imports: [NshmpAboutModule],
})
export class MyApplicationModule {}

Screenshots

About page example screenshot

Components

About Content

Main content for making an about page with default expansion panels.

See AboutContentComponent for input parameters.

To use import NshmpAboutModule.

Example :
<nshmp-lib-ng-about-content></nshmp-lib-ng-about-content>

About Control Panel

Expansion panel content describing the control panel for an application.

See AboutControlPanelComponent for input parameters.

To use import NshmpAboutModule.

Example :
<nshmp-lib-ng-about-control-panel></nshmp-lib-ng-about-control-panel>

About Expansion Panels

ng-content for application specific expansion panels.

See AboutExpansionPanelsComponent for input parameters.

To use import NshmpAboutModule.

Example :
<nshmp-lib-ng-about-expansion-panels></nshmp-lib-ng-about-expansion-panels>

About Header Controls

Expansion panel content describing the header controls of an application.

See AboutHeaderControlsComponent for input parameters.

To use import NshmpAboutModule.

Example :
<nshmp-lib-ng-about-header-controls></nshmp-lib-ng-about-header-controls>

About ArcGIS

Content about ArcGIS.

See AboutArcgisComponent for input parameters.

Example :
<nshmp-lib-ng-about-arcgis></nshmp-lib-ng-about-arcgis>

About Main Content Tabs

Content describing the tabs in the application.

See AboutMainContentTabsComponent for input parameters.

To use import NshmpAboutModule.

Example :
<nshmp-lib-ng-about-main-content-tabs></nshmp-lib-ng-about-main-content-tabs>

About Navigating

Information about navigating the application.

See AboutNavigatingExpansionPanel for input parameters.

To use import NshmpAboutModule.

Example :
<nshmp-lib-ng-about-navigating-expansion-panel></nshmp-lib-ng-about-navigating-expansion-panel>

About Plotly

Content about Plotly usage in an application.

See AboutPlotlyComponent for input parameters.

To use import NshmpAboutModule.

Example :
<nshmp-lib-ng-about-plotly></nshmp-lib-ng-about-plotly>

About Settings

Information about application settings.

See AboutSettingsComponent for input parameters.

To use import NshmpAboutModule.

Example :
<nshmp-lib-ng-about-settings></nshmp-lib-ng-about-settings>

Description

About page description.

See DesciptionComponent.

To use import NshmpAboutModule.

Example :
<nshmp-lib-ng-about-description></nshmp-lib-ng-about-description>

Description Title

About page description title.

See DescriptionTitleComponent.

To use import NshmpAboutModule.

Example :
<nshmp-lib-ng-about-description-title></nshmp-lib-ng-about-description-title>

Contact Us

Contact us content.

See ContactUsExpansionPanel for input parameters.

To use import NshmpAboutModule.

Example :
<nshmp-lib-ng-about-contact-us-expansion-panel></nshmp-lib-ng-about-contact-us-expansion-panel>

Saving Settings

Information about saving application's settings.

See SavingSettingsExpansionPanel for input parameters.

To use import NshmpAboutModule.

Example :
<nshmp-lib-ng-about-saving-settings-expansion-panel></nshmp-lib-ng-about-saving-settings-expansion-panel>

Using Application

Information about using the application.

See UsingApplicationExpansionPanel for input parameters.

To use import NshmpAboutModule.

Example :
<nshmp-lib-ng-about-using-application-expansion-panel></nshmp-lib-ng-about-using-application-expansion-panel>

Code scaffolding

Run npm run ng -- generate component component-name --project=nshmp-lib-ng-about to generate a new component.

Can also use npm run ng -- generate directive|pipe|service|class|guard|interface|enum|module --project=nshmp-lib-ng-about.

Note: Don't forget to add --project=nshmp-lib-ng-about or else it will be added to the default project in the angular.json file.

Running unit tests

Run npm run test -- projects/nshmp-lib-ng/about to execute the unit tests.

Further help

To get more help on the Angular CLI use npm run ng -- help or go check out the Angular CLI Overview and Command Reference page.

results matching ""

    No results matching ""