Conga Digital Commerce 202405.2.0 on Conga Revenue Lifecycle Platform
  1. Components
  2. DependentPicklistComponent

File

projects/congarevenuecloud/elements/src/lib/dependent-picklist/dependent-picklist.component.ts

Description

Dependent picklist component displays picklist values with country and state inforamtion of user's address record.

Preview

Usage

Example :
import { DependentPicklistModule } from '@congarevenuecloud/elements';
@NgModule({
imports: [DependentPicklistModule, ...]
})
export class AppModule {}
Example :
```typescript
<apt-dependent-picklist
              [(ngModel)]="myModel"
              [fieldMethod]="fieldService"
              [field]="stateCode"
              [parentField]="countryCode"
              [inline]="isInline"
              [size]="inputSize"
></apt-dependent-picklist>
Example :

Implements

OnChanges ControlValueAccessor OnDestroy

Metadata

changeDetection ChangeDetectionStrategy.Default
providers { provide: NG_VALUE_ACCESSOR, useExisting: DependentPicklistComponent, multi: true }
selector apt-dependent-picklist
template 
<div [class.d-flex]="inline" *ngIf="view$ | async as view">
  <div *ngIf="view.parentDescribe as parentDescribe" class="form-group" [class.mr-3]="inline">
    <label for="parentField">{{parentDescribe?.label}}</label>
    <select class="custom-select" [class.custom-select-sm]="size === 'sm'" [(ngModel)]="view.parentValue" name="parentValue" (ngModelChange)="parentChange($event)" [class.custom-select-lg]="size === 'lg'" id="parentField" required="" name="parentField" [disabled]="parentDescribe?.updateable === false">
      <option [value]="" *ngIf="parentDescribe?.nillable">{{'DEPENDENT_PICKLIST.CHOOSE' | translate}}...</option>
      <option *ngFor="let picklist of parentDescribe?.picklistValues" [value]="picklist.value" [hidden]="!picklist.active">{{picklist.label}}</option>
    </select>
  </div>
  <div *ngIf="view.fieldDescribe as fieldDescribe" class="form-group">
    <label for="childField">{{fieldDescribe?.label}}</label>
    <select class="custom-select" [class.custom-select-sm]="size === 'sm'" [(ngModel)]="view.value" name="value" (ngModelChange)="childChange($event)" [class.custom-select-lg]="size === 'lg'" id="childField" required="" name="childField" [disabled]="fieldDescribe?.updateable === false || !view?.childOptions">
      <option [value]="" *ngIf="fieldDescribe?.nillable">{{'DEPENDENT_PICKLIST.CHOOSE' | translate}}...</option>
      <option *ngFor="let picklist of view.childOptions" [value]="picklist.value" [hidden]="!picklist.active">{{picklist.label}}</option>
    </select>
  </div>
</div>

Index

Properties
Methods
Inputs

Constructor

constructor(metadataService: MetadataService)
Parameters :
Name Type Optional
metadataService MetadataService No

Inputs

entity
Type : AObject

Represents the type of the object which is an instance of AObject
field
Type : string

Field Name to be passed as string.
inline
Type : boolean
Default value : true

Flag to set this as an inline element.
parentField
Type : string

Parent field to be passed as string.
size
Type : "sm" | "md" | "lg"
Default value : 'md'

Size value to render the input.

Methods

childChange
childChange(evt)

Sets the state information selected by the user from dropdown.

Parameters :
Name Optional Description
evt No

Event associated with the user action.
Returns : void
parentChange
parentChange(evt)

Sets the country and corresponding state information selected by the user from dropdown.

Parameters :
Name Optional Description
evt No

Event associated with the user action.
Returns : void
writeValue
writeValue(value: [string, string])
Parameters :
Name Type Optional
value [string, string] No
Returns : void

Properties

onChange

Sets the value property to the option selected in the dropdown.
Parameters :
Name Description
value

selected by user from the picklist.
value
Type : [string, string]

Current selected value.
view$
Type : BehaviorSubject<DependentPicklistView>
Default value : new BehaviorSubject<DependentPicklistView>(null)

Used to hold information for rendering the view.
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""