### Get Angular CLI Help

Source: https://github.com/gsa/sam-ui-elements/blob/master/test-app/README.md

Displays help information for Angular CLI commands, providing guidance on their usage and available options.

```Shell
ng help
```

--------------------------------

### Run Angular Development Server

Source: https://github.com/gsa/sam-ui-elements/blob/master/test-app/README.md

Starts a local development server for the Angular application. The application will be accessible at `http://localhost:4200/` and will automatically reload upon changes to source files.

```Shell
ng serve
```

--------------------------------

### Example Angular Component Usage in HTML

Source: https://github.com/gsa/sam-ui-elements/blob/master/typedoc.md

Demonstrates how an Angular component is integrated into an HTML template, illustrating the binding of an input property and an output event. This snippet shows the perspective of a developer consuming the component.

```HTML
<my-component [someInput]="controllerVariable" (someOuput)="controllerMethod()"></my-component>
```

--------------------------------

### Displaying Hierarchical Data in Templates

Source: https://github.com/gsa/sam-ui-elements/blob/master/src/ui-kit/form-controls/sam-sds-autocomplete/autocomplete-search/autocomplete-search.component.html

This snippet illustrates how to render nested data structures (result, child, subchild) using a templating language. It utilizes a 'getObjectValue' helper function and direct property access to display primary and secondary text fields for each level. The example also includes a placeholder for 'No results found' and a variable for screen-reader-only text.

```Templating Language
*   {{ getObjectValue(result, configuration.primaryTextField) }}
    
    {{ result[configuration.secondaryTextField] }}
    
    *   {{ getObjectValue(child, configuration.primaryTextField) }}
        
        {{ child[configuration.secondaryTextField] }}
        
        *   {{ getObjectValue( subchild, configuration.primaryTextField ) }}
            
            {{ subchild[configuration.secondaryTextField] }}
            
    *   No results found

*   {{ srOnlyText }}
```

--------------------------------

### Typedoc Javadoc-style Doc Comment Input

Source: https://github.com/gsa/sam-ui-elements/blob/master/typedoc.md

Provides an example of Javadoc-style doc comments that Typedoc processes. It demonstrates the use of `@input` and `@output` tags, which Typedoc can parse and represent in its generated documentation. These comments are placed directly above the code they describe.

```Typescript
/**
 * @input  Model - A model to be consumed by this 
 
 * @output  Value - A value the component returns
 */
```

--------------------------------

### Call getDate Method on Day Object in Template

Source: https://github.com/gsa/sam-ui-elements/blob/master/src/ui-kit/experimental/date-range-v2/datepicker/picker.template.html

Calls the `getDate()` method on the `day` object and interpolates its return value into the template. This is typically used to extract the day of the month from a Date object, allowing precise display of the day number.

```Template
{{ day.getDate() }}
```

--------------------------------

### Display Current Month in Template

Source: https://github.com/gsa/sam-ui-elements/blob/master/src/ui-kit/experimental/date-range-v2/datepicker/picker.template.html

Interpolates and displays the value of the `currentMonth` variable within the template. This variable likely holds the name or number of the current month, dynamically updated by the component's logic.

```Template
{{ currentMonth }}
```

--------------------------------

### Display Day Variable in Template

Source: https://github.com/gsa/sam-ui-elements/blob/master/src/ui-kit/experimental/date-range-v2/datepicker/picker.template.html

Interpolates and displays the value of the `day` variable within the template. This variable likely represents a date object or a specific day, used for rendering individual calendar days.

```Template
{{ day }}
```

--------------------------------

### Display Cancel Text in Template

Source: https://github.com/gsa/sam-ui-elements/blob/master/src/ui-kit/experimental/date-range-v2/datepicker/picker.template.html

Interpolates and displays the value of the `cancelText` variable within the template. This variable likely holds a localized string for a 'cancel' button or message, providing configurable UI text.

```Template
{{cancelText}}
```

--------------------------------

### Accessing Nested Property with Optional Chaining in Template

Source: https://github.com/gsa/sam-ui-elements/blob/master/src/ui-kit/experimental/alert/alert.template.html

This snippet demonstrates how to safely access a nested property 'sr' from an object 'types' using optional chaining ('?.') within a template context. It assumes 'this.types' is an object where keys are 'type' strings, and values are objects that may or may not have an 'sr' property. The optional chaining ensures that if 'this.types[this.type]' is null or undefined, the expression gracefully evaluates to undefined instead of throwing an error.

```JavaScript
{{this.types[this.type]?.sr}}
```

--------------------------------

### Build Angular Project

Source: https://github.com/gsa/sam-ui-elements/blob/master/test-app/README.md

Compiles the Angular project into deployable artifacts. The build output is stored in the `dist/` directory. Use the `-prod` flag for an optimized production build.

```Shell
ng build
```

```Shell
ng build -prod
```

--------------------------------

### Typescript Class for Automatic Typedoc Documentation

Source: https://github.com/gsa/sam-ui-elements/blob/master/typedoc.md

Presents a simple TypeScript class demonstrating how Typedoc automatically documents properties, constructor parameters, and methods without explicit doc blocks, leveraging TypeScript's type annotations. This reduces the need for redundant documentation when annotations are used effectively.

```Typescript
export class Person {

  private fullName: string;

  constructor(public firstName: string, public lastName: string) {
    this.fullName = firstName + ' ' + lastName;
  }

  introduce(): string {
    return 'Hi, my name is ' + this.fullName;
  }

}
```

--------------------------------

### Configure Typedoc for JSON Output

Source: https://github.com/gsa/sam-ui-elements/blob/master/typedoc.md

Demonstrates how to instruct Typedoc to generate documentation in JSON format. This can be done either via a command-line argument or by specifying the 'json' property in a Typedoc configuration file (e.g., `tsconfig.json`). Setting this property overrides other output settings.

```Shell
$ typedoc --json path/to/file.json path/to/src
```

```JSON
"json": path/to/ouput/file.json
```

--------------------------------

### Run Angular Unit Tests

Source: https://github.com/gsa/sam-ui-elements/blob/master/test-app/README.md

Executes the unit tests for the Angular application using Karma.

```Shell
ng test
```

--------------------------------

### Angular Component Definition with Input and Output

Source: https://github.com/gsa/sam-ui-elements/blob/master/typedoc.md

Defines a sample Angular component in Typescript, showcasing the use of `@Input` and `@Output` decorators to expose public properties and events. It also includes private members to highlight what should typically be hidden from end-user documentation.

```Typescript
/**
 * MyAngularComponent <my-angular-component>
 * This component makes something magic happen in the DOM
 */
@Component({
  selector: 'my-angular-component'
})
class MyAngularComponent {
  @Input() someInput: string;
  @Ouput() someOutput: EventEmitter<any> = new EventEmitter<any>;

  private someProperty: string;

  constructor() {}

  someSecretMethod(param: SomeInterface): SomeInterface[] {
    return [].push(param);
  }

  ...
}
```

--------------------------------

### Set Typedoc Compilation Mode

Source: https://github.com/gsa/sam-ui-elements/blob/master/typedoc.md

Explains how to configure Typedoc's compilation mode, which determines how it treats source files. The 'modules' mode, recommended for projects like SAM, treats each file as an individual module, while 'file' mode compiles into a single namespace. Configuration can be done via command line or `tsconfig.json`.

```Shell
$ typedoc --mode modules
```

```JSON
"mode": "modules"
```

--------------------------------

### Override Typedoc Annotations with Doc Comments

Source: https://github.com/gsa/sam-ui-elements/blob/master/typedoc.md

Illustrates how to provide more verbose documentation for parameters or return types by explicitly writing Javadoc-style doc blocks. This method overrides the automatic documentation generated by Typedoc from TypeScript annotations, allowing for custom descriptions.

```Typescript
/**
 * @param  name  Says hello to this name
 */
 sayHello(name: string): string {
   return "Hello, " + name;
 }
```

--------------------------------

### TypeDoc JSON Output Fragment for API Structure

Source: https://github.com/gsa/sam-ui-elements/blob/master/typedoc.md

This snippet shows a partial JSON structure from a TypeDoc output, detailing how API elements like 'Methods' and 'Classes' are grouped and linked to their children and source files (e.g., 'path/to/person.ts'). It highlights the 'kind' property for element types and 'children' for relationships, demonstrating the internal representation of documentation.

```APIDOC
            "children": [
              570,
              568,
              571
            ]
          },
          {
            "title": "Methods",
            "kind": 2048,
            "children": [
              575
            ]
          }
        ],
        "sources": [
          {
            "fileName": "path/to/person.ts",
            "line": 1,
            "character": 19
          }
        ]
      }
    ],
    "groups": [
      {
        "title": "Classes",
        "kind": 128,
        "children": [
          567
        ]
      }
    ],
    "sources": [
      {
        "fileName": "path/to/person.ts",
        "line": 1,
        "character": 0
      }
    ]
  },
...
```

--------------------------------

### JSON Representation of Person Class API Structure

Source: https://github.com/gsa/sam-ui-elements/blob/master/typedoc.md

This JSON snippet provides a detailed, structured representation of the 'Person' class, mimicking the output of a documentation generator. It outlines the class's properties (fullName, firstName, lastName), constructor parameters, and methods (introduce), including their types, flags, and source locations.

```JSON
...,
  {
    "id": 566,
    "name": "\"path/to/person\"",
    "kind": 1,
    "kindString": "External module",
    "flags": {
      "isExported": true
    },
    "originalName": "path/to/person.ts",
    "children": [
      {
        "id": 567,
        "name": "Person",
        "kind": 128,
        "kindString": "Class",
        "flags": {
          "isExported": true
        },
        "children": [
          {
            "id": 569,
            "name": "constructor",
            "kind": 512,
            "kindString": "Constructor",
            "flags": {
              "isExported": true
            },
            "signatures": [
              {
                "id": 572,
                "name": "new Person",
                "kind": 16384,
                "kindString": "Constructor signature",
                "flags": {},
                "parameters": [
                  {
                    "id": 573,
                    "name": "firstName",
                    "kind": 32768,
                    "kindString": "Parameter",
                    "flags": {},
                    "type": {
                      "type": "instrinct",
                      "name": "string"
                    }
                  },
                  {
                    "id": 574,
                    "name": "lastName",
                    "kind": 32768,
                    "kindString": "Parameter",
                    "flags": {},
                    "type": {
                      "type": "instrinct",
                      "name": "string"
                    }
                  }
                ],
                "type": {
                  "type": "reference",
                  "name": "Person",
                  "id": 567
                }
              }
            ],
            "sources": [
              {
                "fileName": "path/to/person.ts",
                "line": 3,
                "character": 27
              }
            ]
          },
          {
            "id": 570,
            "name": "firstName",
            "kind": 1024,
            "kindString": "Property",
            "flags": {
              "isConstructorProperty": true,
              "isExported": true,
              "isPublic": true
            },
            "sources": [
              {
                "fileName": "path/to/person.ts",
                "line": 5,
                "character": 30
              }
            ],
            "type": {
              "type": "instrinct",
              "name": "string"
            }
          },
          {
            "id": 568,
            "name": "fullName",
            "kind": 1024,
            "kindString": "Property",
            "flags": {
              "isPrivate": true,
              "isExported": true
            },
            "sources": [
              {
                "fileName": "path/to/person.ts",
                "line": 3,
                "character": 18
              }
            ],
            "type": {
              "type": "instrinct",
              "name": "string"
            }
          },
          {
            "id": 571,
            "name": "lastName",
            "kind": 1024,
            "kindString": "Property",
            "flags": {
              "isConstructorProperty": true,
              "isExported": true,
              "isPublic": true
            },
            "sources": [
              {
                "fileName": "path/to/person.ts",
                "line": 5,
                "character": 55
              }
            ],
            "type": {
              "type": "instrinct",
              "name": "string"
            }
          },
          {
            "id": 575,
            "name": "introduce",
            "kind": 2048,
            "kindString": "Method",
            "flags": {
              "isExported": true
            },
            "signatures": [
              {
                "id": 576,
                "name": "introduce",
                "kind": 4096,
                "kindString": "Call signature",
                "flags": {},
                "type": {
                  "type": "instrinct",
                  "name": "string"
                }
              }
            ],
            "sources": [
              {
                "fileName": "path/to/person.ts",
                "line": 9,
                "character": 11
              }
            ]
          }
        ],
        "groups": [
          {
            "title": "Constructors",
            "kind": 512,
            "children": [
              569
            ]
          },
          {
            "title": "Properties",
            "kind": 1024,
```

--------------------------------

### Generate Angular CLI Scaffolding

Source: https://github.com/gsa/sam-ui-elements/blob/master/test-app/README.md

Generates new Angular artifacts such as components, directives, pipes, services, classes, guards, interfaces, enums, or modules using the Angular CLI.

```Shell
ng generate component component-name
```

```Shell
ng generate directive|pipe|service|class|guard|interface|enum|module
```

--------------------------------

### Define External Files for Typedoc

Source: https://github.com/gsa/sam-ui-elements/blob/master/typedoc.md

Illustrates how to specify external TypeScript files that Typedoc should resolve but not necessarily include in the main documentation output. This is typically used for declaration files (`.d.ts`). The configuration uses glob patterns and can be set via command line or `tsconfig.json`.

```Shell
$ typedoc --externalPattern **/*/*.d.ts
```

```JSON
"externalPattern: "**/*/*.d.ts"
```

--------------------------------

### Typedoc JSON Output for Component Property

Source: https://github.com/gsa/sam-ui-elements/blob/master/typedoc.md

Illustrates a fragment of the JSON output generated by Typedoc for a component property. This snippet demonstrates how Typedoc captures decorator information, which is crucial for programmatically identifying and extracting only the public-facing `@Input` and `@Output` properties for documentation.

```JSON
  {
    "id": 568,
    "name": "someInput",
    "kind": 1024,
    "kindString": "Property",
    "decorators": [
      {
        "name": "Input",
        ...
      ...
    ...

```

--------------------------------

### Run Angular End-to-End Tests

Source: https://github.com/gsa/sam-ui-elements/blob/master/test-app/README.md

Executes the end-to-end tests for the Angular application using Protractor.

```Shell
ng e2e
```

--------------------------------

### Exclude Files from Typedoc Output

Source: https://github.com/gsa/sam-ui-elements/blob/master/typedoc.md

Shows how to exclude specific files or patterns from Typedoc's generated documentation. This is useful for omitting test files, build artifacts, or other non-essential source files. Exclusion can be configured using relative paths or glob patterns via command line or `tsconfig.json`.

```Shell
$ typedoc --exclude **/directory/*.ts
```

```JSON
"excludes": "**/directory/*.ts"
```

--------------------------------

### Typedoc JSON Output for Doc Comments

Source: https://github.com/gsa/sam-ui-elements/blob/master/typedoc.md

Shows the JSON structure that Typedoc generates from Javadoc-style doc comments. This output includes an array of 'tags', each containing the tag name and its associated text, providing a structured representation of the documentation.

```JSON
"tags": [
  {
    "tag": "input",
    "text": "Model - A model to be consumed by this component"
  },
  {
    "tag": "output",
    "text": "Value - A value the component returns"
  }
]
```

--------------------------------

### Angular Template Interpolation for Pagination and Options

Source: https://github.com/gsa/sam-ui-elements/blob/master/src/ui-kit/layout/pagination/pagination.template.html

This snippet demonstrates Angular's interpolation syntax (`{{ }}`) to bind and display dynamic data within an HTML template. It illustrates calling component methods (`printPerPageString()`, `printDisplayingString()`, `paginator.getCurrentPage()`, `paginator.getTotalPages()`) and accessing object properties (`option.label`) to present UI information such as items per page, current page, and total pages.

```Angular
{{ printPerPageString() }} {{ option.label }}

{{ printDisplayingString() }} {{ paginator.getCurrentPage() }} of {{ paginator.getTotalPages() }}
```

--------------------------------

### Displaying Entity/User Contact and Address Information

Source: https://github.com/gsa/sam-ui-elements/blob/master/src/ui-kit/components/point-of-contact/point-of-contact.template.html

A template snippet designed to render comprehensive contact and address details for an entity or user. It binds various data properties like full name, title, address lines, city, state, zip, email, phone numbers, fax, and website to display elements, commonly used in UI components.

```Template
{{data.fullName}}
{{data.title}} {{data.address}},
{{data.address2}}
{{data.city}}, {{data.state}} {{data.zip}}
[{{data.email}}](mailto:{{data.email}})
{{data.phone}}
{{data.phone2}}
{{data.fax}}
{{data.website}}
```

--------------------------------

### Render Nested List with Template Variables

Source: https://github.com/gsa/sam-ui-elements/blob/master/src/ui-kit/layout/footer/footer.component.html

This snippet illustrates rendering a nested list structure where the text content of both parent and child list items is dynamically populated using template variables. This pattern is useful for generating navigation menus or hierarchical content.

```Template
*   {{section.text}}
    *   {{link.text}}
```

--------------------------------

### Displaying Key-Value Configured Item Data

Source: https://github.com/gsa/sam-ui-elements/blob/master/src/ui-kit/form-controls/autocomplete-multiselect/autocomplete-multiselect.template.html

Template expressions for rendering dynamic data based on a `keyValueConfig` object. Includes conditional display of `valueProperty` or a default `value`, and direct display of `categoryProperty`, `valueProperty`, and `subheadProperty` from an `item` object.

```JavaScript Templating
{{ keyValueConfig ? item[(keyValueConfig?.valueProperty)] : item?.value }}
```

```JavaScript Templating
{{ item[(keyValueConfig?.categoryProperty)] }}
```

```JavaScript Templating
{{ item[(keyValueConfig?.valueProperty)] }}
```

```JavaScript Templating
{{ item[(keyValueConfig?.subheadProperty)] }}
```

--------------------------------

### Display Footer Logo Text

Source: https://github.com/gsa/sam-ui-elements/blob/master/src/ui-kit/layout/footer/footer.component.html

This snippet demonstrates how to display text content for a footer logo, typically retrieved from a 'model' object's 'footerLogo' property. It's a common pattern for rendering dynamic UI elements.

```Template
{{model.footerLogo.text}}
```

--------------------------------

### Displaying Search and Free Text Results

Source: https://github.com/gsa/sam-ui-elements/blob/master/src/ui-kit/form-controls/autocomplete-multiselect/autocomplete-multiselect.template.html

Template expressions used to display search-related text, combining a label with the search query, and presenting search results with an associated free text subtext.

```JavaScript Templating
{{ srlabelText }} {{ searchText }}
```

```JavaScript Templating
{{ searchText }} - {{ freeTextSubtext }}
```

--------------------------------

### Define a Person Class in TypeScript

Source: https://github.com/gsa/sam-ui-elements/blob/master/typedoc.md

This TypeScript class defines a 'Person' with 'firstName' and 'lastName' properties, which are used to derive a 'fullName'. It includes a constructor for initialization and an 'introduce' method to return a greeting.

```Typescript
export class Person {

  private fullName: string;

  constructor(public firstName: string, public lastName: string) {
    this.fullName = firstName + ' ' + lastName;
  }

  introduce(): string {
    return 'Hi, my name is ' + this.fullName;
  }

}
```

--------------------------------

### Displaying Object Values in UI Template

Source: https://github.com/gsa/sam-ui-elements/blob/master/src/ui-kit/form-controls/sam-sds-autocomplete/selected-result/selected-result.component.html

This snippet demonstrates how to access and display data from a 'result' object using a templating language common in UI frameworks. It retrieves a primary field value using a helper function `getObjectValue` and a secondary field value directly via bracket notation. This pattern is typically used within a UI component to render dynamic content based on data models and configuration.

```Template
*   {{ getObjectValue(result, configuration.primaryTextField) }}
    {{ result\[configuration.secondaryTextField\] }}
```

--------------------------------

### Dynamic UI Text and Accessibility Rendering

Source: https://github.com/gsa/sam-ui-elements/blob/master/src/ui-kit/experimental/hierarchical/hierarchical-tree-grid/hierarchical-tree-grid.component.html

This snippet illustrates the use of template expressions to display dynamic content and enhance accessibility within a UI component. It covers rendering empty result messages, dynamic selection text, screen reader navigation hints, and column/row data.

```Angular Template
{{configuration.emptyResultText}

Select

 {{'Select '+ row[configuration.primaryTextField]}} {{configuration.navigateScreenReaderText + ' '+row[configuration.primaryTextField]}}

{{columnHeaderText[cIndex]}} {{row[col]}}
```

--------------------------------

### Simple Category Display

Source: https://github.com/gsa/sam-ui-elements/blob/master/src/ui-kit/form-controls/autocomplete-multiselect/autocomplete-multiselect.template.html

A straightforward template expression for displaying a category name directly.

```JavaScript Templating
{{ category }}
```

--------------------------------

### Displaying Comment Properties in Angular Template

Source: https://github.com/gsa/sam-ui-elements/blob/master/src/ui-kit/components/comments/comment/comment.template.html

Illustrates how to bind and display properties of a `comment` object within an Angular template. This includes accessing a simple property, using optional chaining (`?.`) for safe property access, and applying the `date` pipe to format datetime values for user-friendly display.

```Angular Template
{{comment.username}

{{comment?.username}}
{{comment?.datetime}}
{{ comment?.datetime | date:'medium' }}

{{comment?.text}}
```

--------------------------------

### Exclude External Files from Typedoc Output

Source: https://github.com/gsa/sam-ui-elements/blob/master/typedoc.md

Explains how to prevent Typedoc from including externally resolved files (defined by `externalPattern`) in its final documentation output. This boolean option helps in decluttering the generated documentation. It can be enabled via a command-line flag or a boolean property in `tsconfig.json`.

```Shell
$ typedoc --excludeExternals
```

```JSON
"excludeExternals": true
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.