The search box component and the search results component are split up. this is done for some practical reasons. most noteably, so results can be placed wherever it makes sense to put them. This does complicate set up a tiny bit, but the tradeoff in flexibility is well worth it.

So, lets get down to business. lets bind the output of the search component to the input of the search results component.

Angular

first two methods to your component(or app.component.ts) that will handle the output of our search component:

  public onSearchResults(evt: SzSearchResults) {
    console.log('@senzing/sdk-components-ng/sz-search/searchResults: ', evt);
    // store on current scope
    this.currentSearchResults = evt;
  }

  public onSearchParameterChange(searchParams: SzEntitySearchParams) {
    // store search parameter on current scope
    this.currentSearchParameters = searchParams;
  }

and the property currentSearchResults and import the SzAttributeSearchResult model:

public currentSearchResults: SzAttributeSearchResult[];

your app.component.ts up to this point should look something like this:

import {
  SzAttributeSearchResult,
  SzEntitySearchParams,
  SzSearchComponent
} from '@senzing/sdk-components-ng';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
  public currentSearchResults: SzAttributeSearchResult[];
  public currentSearchParameters: SzEntitySearchParams;

  constructor(){}

  public onSearchResults(evt: SzAttributeSearchResult[]){
    // store on current scope
    this.currentSearchResults = evt;
  }

  public onSearchParameterChange(searchParams: SzEntitySearchParams) {
    // store search parameter on current scope
    this.currentSearchParameters = searchParams;
  }
}

now lets add the attrribute search component(sz-search) to the method we just created. Add the following to your app.component.html file:

<!-- start search box -->
<sz-search 
  (resultsChange)="onSearchResults($event)"
  (parameterChange)="onSearchParameterChange($event)"></sz-search>
<!-- end search box -->

the attribute in parens just tells angular that it's an event and not just an attribute.

Now we should be getting the results of the search, and assigning it to the class property currentSearchResults. The next step is to do something with that data, so add the following to your app.component.html file:

<!-- start search results -->
<sz-search-results [results]="currentSearchResults" [parameters]="currentSearchParameters"></sz-search-results>
<!-- end search results -->

Web Components

  <!-- @senzing/sdk/search/sz-search -->
  <!--
    NAME_FULL
    DATE_OF_BIRTH
    IDENTIFIER
    IDENTIFIER_TYPE
    ADDR_FULL
    PHONE_NUMBER
    EMAIL_ADDRESS
  -->
  <div class="content" *ngIf="true"
  [ngClass]="_layoutClasses"
  >
      <section class="entity search" (ngSubmit)="submitSearch()">
        <form class="form" [formGroup]="entitySearchForm" novalidate>
          <div class="sz-row">
            <div class="field name" [class.disabled]="disabledFields['name']" *ngIf="!hiddenFields['name']">
              <label for="entity-name">Name</label>
              <input formControlName="NAME_FULL"
                      class="search-input"
                      id="entity-name"
                      type="text"
                      list="search-history-entity-name"
                      [attr.disabled]="getDisabled('name')"
                      (keyup.enter)="onKeyEnter()"
                      placeholder="Search for Name"
                      (input)="checkHistoryForMatchOnChange($event)">
              <datalist *ngIf="searchHistoryName.length > 0 && !searchHistoryDisabled" id="search-history-entity-name">
                <option *ngFor="let item of searchHistoryName" [value]="item">{{item}}</option>
              </datalist>
            </div>
            <div class="field dob" [class.disabled]="disabledFields['dob']" *ngIf="!hiddenFields['dob']">
              <label for="entity-dob">Date of Birth</label>
              <input formControlName="DATE_OF_BIRTH"
                      id="entity-dob"
                      type="text"
                      list="search-history-entity-dob"
                      [attr.disabled]="getDisabled('dob')"
                      (keyup.enter)="onKeyEnter()"
                      placeholder="mm/dd/yyyy">
              <datalist *ngIf="searchHistoryDob.length > 0 && !searchHistoryDisabled" id="search-history-entity-dob">
                <option *ngFor="let item of searchHistoryDob" [value]="item">{{item}}</option>
              </datalist>
            </div>
            <div class="field identifier" [class.disabled]="disabledFields['identifier']" *ngIf="!hiddenFields['identifier']">
              <label for="entity-identifier">Identifier</label>
              <input formControlName="IDENTIFIER"
                      id="entity-identifier"
                      type="text"
                      list="search-history-entity-identifier"
                      [attr.disabled]="getDisabled('identifier')"
                      (keyup.enter)="onKeyEnter()"
                      [placeholder]="placeHolderTextForIdentifierField">
              <datalist *ngIf="searchHistoryIdentifier.length > 0 && !searchHistoryDisabled" id="search-history-entity-identifier">
                <option *ngFor="let item of searchHistoryIdentifier" [value]="item">{{item}}</option>
              </datalist>
            </div>
            <div class="field type" [class.disabled]="disabledFields['identifierType'] || disabledFields['identifier']" *ngIf="!hiddenFields['identifier'] && !hiddenFields['identifierType']">
              <label for="entity-type">Type</label>
              <div class="flex-type-row">
                <mat-icon *ngIf="showIdentifierTypesPicker" class="identifier-type-icon left hide-on-medium hide-on-wide" matTooltipPosition="above" matTooltip="Choose Identifiers in List" aria-hidden="false" aria-label="Choose Identifiers in List" (click)="chooseIdentifiers($event)">filter_list</mat-icon>
                <select formControlName="IDENTIFIER_TYPE"
                        class="identifier-dropdown"
                        [class.filterShowing]="showIdentifierTypesPicker"
                        id="entity-type"
                        [attr.disabled]="getAnyDisabled(['identifierType','identifier'])"
                        name="type">
                  <option [ngValue]="null" disabled>Choose ID type</option>
                  <option *ngFor="let type of orderedAttributes()"
                          [value]="type.attributeCode"
                          [selected]="type.attributeCode === 'PASSPORT_NUMBER'">{{ attributeCodeAsHumanReadable(type.attributeCode) | uppercase }}
                  </option>
                </select>
                <mat-icon *ngIf="showIdentifierTypesPicker" class="identifier-type-icon right  hide-on-narrow" matTooltipPosition="left" matTooltip="Choose Identifiers in List" aria-hidden="false" aria-label="Choose Identifiers in List" (click)="chooseIdentifiers($event)">filter_list</mat-icon>
              </div>
            </div>
            <div class="action-button__wrapper hide-on-narrow" [class.disabled]="disabledFields['searchButton']" *ngIf="!hiddenFields['searchButton']">
              <button mat-button class="button__search-go"
              [attr.disabled]="getDisabled('searchButton')"
              (click)="submitSearch()">{{searchButtonLabel}}</button>
            </div>
          </div>
          <div class="sz-row">
            <div class="field address" [class.disabled]="disabledFields['address']" *ngIf="!hiddenFields['address']">
              <label for="entity-address">Address</label>
              <input formControlName="ADDR_FULL"
                      id="entity-address"
                      type="text"
                      list="search-history-entity-address"
                      [attr.disabled]="getDisabled('address')"
                      (keyup.enter)="onKeyEnter()"
                      placeholder="Search for Address">
              <datalist *ngIf="searchHistoryAddress.length > 0 && !searchHistoryDisabled" id="search-history-entity-address">
                <option *ngFor="let item of searchHistoryAddress" [value]="item">{{item}}</option>
              </datalist>
            </div>
            <div class="field phone" [class.disabled]="disabledFields['phone']" *ngIf="!hiddenFields['phone']">
              <label for="entity-phone">Phone</label>
              <input formControlName="PHONE_NUMBER"
                      id="entity-phone"
                      type="text"
                      list="search-history-entity-phone"
                      [attr.disabled]="getDisabled('phone')"
                      placeholder="Phone #">
              <datalist *ngIf="searchHistoryPhone.length > 0 && !searchHistoryDisabled" id="search-history-entity-phone">
                <option *ngFor="let item of searchHistoryPhone" [value]="item">{{item}}</option>
              </datalist>
            </div>
            <div class="field email" [class.disabled]="disabledFields['email']" *ngIf="!hiddenFields['email']">
              <label for="entity-email">Email</label>
              <input formControlName="EMAIL_ADDRESS"
                      id="entity-email"
                      type="text"
                      list="search-history-entity-email"
                      [attr.disabled]="getDisabled('email')"
                      (keyup.enter)="onKeyEnter()"
                      placeholder="Email Address">
              <datalist *ngIf="searchHistoryEmail.length > 0 && !searchHistoryDisabled" id="search-history-entity-email">
                <option *ngFor="let item of searchHistoryEmail" [value]="item">{{item}}</option>
              </datalist>
            </div>
            <div class="field spacer">

            </div>
            <div class="action-button__wrapper hide-on-narrow" [class.disabled]="disabledFields['resetButton']" *ngIf="!hiddenFields['resetButton']">
              <button mat-button class="button__search-clear"
              [attr.disabled]="getDisabled('resetButton')"
              (click)="clearSearch()">{{cancelButtonLabel}}</button>
            </div>
          </div>
          <div class="sz-row bottom">
            <div class="action-button__wrapper hide-on-medium hide-on-wide" [class.disabled]="disabledFields['resetButton']" *ngIf="!hiddenFields['resetButton']">
              <button mat-button class="button__search-clear"
              [attr.disabled]="getDisabled('resetButton')"
              (click)="clearSearch()">{{cancelButtonLabelShort}}</button>
            </div>
            <div class="action-button__wrapper hide-on-medium hide-on-wide" [class.disabled]="disabledFields['searchButton']" *ngIf="!hiddenFields['searchButton']">
              <button mat-button class="button__search-go"
              [attr.disabled]="getDisabled('searchButton')"
              (click)="submitSearch()">{{searchButtonLabelShort}}</button>
            </div>
          </div>
        </form>
      </section>

    </div>

./sz-search.component.scss

@use "../../scss/colors";

:host {
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;

  font-family: var(--sz-font-family);
  color: var(--sz-font-color);
  font-size: var(--sz-font-size);

  textarea {
    width: 1000px;
    height: 400px;
  }

  .label-title {
    text-transform: uppercase;
  }

  .layout-narrow {
    .hide-on-narrow {
      display: none;
    }

    /* actions buttons are in different spot in narrow layout*/
    .action-button__wrapper {
      width: auto;
      min-width: unset;
      margin: 0 1em 0 0;
    }
    .sz-row {
      flex-wrap: wrap;

      &.bottom {
        justify-content: flex-end;
        flex-flow: row;
      }
    }
    /*.field.email {
      width: unset;
    }*/
    .field.identifier {
      width: 50%;
    }
    .field.type { 
      padding-right: 0px;
      margin-right: 0px;
      width: 45%; 
    }
    .field.email { 
      width: 38%;
      flex-grow: 2; 
      padding-right: 0; 
      margin-right: 10px; 
    }
  }
  .layout-medium {
    .hide-on-medium {
      display: none;
    }
    .field.email {
      width: 40%;
    }
  }
  .layout-wide {
    .hide-on-wide {
      display: none;
    }
    .field.email {
      width: 32%;
    }
  }

  .main-card__label {
    min-height: 150px;
    width: 200px;
    min-width: 200px;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    color: colors.$white;
    &.search {
      background-color: colors.$green;
    }
    &.insights {
      background-color: colors.$orange;
    }
    &.suggestions {
      background-color: colors.$brown;
    }
    &.data {
      background-color: colors.$dark2;
    }
    &.health {
      background-color: colors.$dark-blue;
    }
  }

  .action-button__wrapper {
    display: flex;
    justify-content: center;
    text-align: center;
    width: 203px;
    //max-width: 145px;
    min-width: 145px;
    margin-right: 10px;

    &.disabled {
      button.button__search-go {
        border-color: var(--sz-search-button-disabled-border-color);
        background-color: var(--sz-search-button-disabled-background-color);
        color: var(--sz-search-button-disabled-color);
      }
      button.button__search-clear {
        border-color: var(--sz-clear-button-disabled-border-color);
        background-color: var(--sz-clear-button-disabled-background-color);
        color: var(--sz-search-clear-button-disabled-color);
      }
    }

    button {
      border: var(--sz-search-button-border);
      border-radius: var(--sz-search-button-border-radius);
      padding: var(--sz-search-button-padding);
      margin: var(--sz-search-button-margin);
      height: 40px;

      &.button__search-go {
        background-color: var(--sz-search-button-submit-background-color);
        color: var(--sz-search-button-submit-color);
        border: var(--sz-search-button-submit-border);
        white-space: nowrap;
        padding: var(--sz-search-button-submit-padding);
        font-family: var(--sz-search-button-submit-font-family);
        font-size: var(--sz-search-button-submit-font-size);
        font-weight: var(--sz-search-button-submit-font-weight);
      }
      &.button__search-clear {
        background-color: var(--sz-search-button-clear-background-color);
        color: var(--sz-search-button-clear-color);
        white-space: nowrap;
        padding: var(--sz-search-button-clear-padding);
        font-family: var(--sz-search-button-clear-font-family);
        font-size: var(--sz-search-button-clear-font-size);
        font-weight: var(--sz-search-button-clear-font-weight);
      }
    }
  }
  .content {
    align-items: center;
    display: flex;
    padding: 0px;
    width: 100%;
  }

  select {
    padding: var(--sz-search-input-padding);
    margin: var(--sz-search-input-margin);
    border: var(--sz-search-input-border);
    border-radius: var(--sz-search-input-border-radius);
    background-color: var(--sz-search-input-background-color);
  }

  input {
    //margin: 0 20px;
    width: calc( 100% - 10px);
    font-size: var(--sz-search-input-font-size);
    color: var(--sz-search-input-color);
    background-color: var(--sz-search-input-background-color);
    line-height: 1.5;
    height: 30px;
    padding: var(--sz-search-input-padding);
    margin: var(--sz-search-input-margin);
    border: var(--sz-search-input-border);
    border-radius: var(--sz-search-input-border-radius);
    box-sizing: unset;

    &:hover, &:focus {
      /* box-shadow: inset 0 -2px #ccc; */
      border: var(--sz-search-input-hover-border);
      border-color: var(colors.$input-active-border-color);
      outline: none;
    }
    &::placeholder {
      color: var(colors.$input-placeholder-color);
      margin-left: 2em;
      transition: opacity 100ms linear;
    }
    &:focus::placeholder {
      opacity: .4;
    }
    &:disabled {
      pointer-events: var(--sz-disabled-input-pointer-events);
      cursor: var(--sz-disabled-input-cursor);
    }
  }

  i.label_icon {
    font-size: 5em;
    position: absolute;
    opacity: 0.1;
    z-index: 2;
  }
  .entity.search {
    width: 100%;
  }
  .sz-row {
    display: flex;
    padding: 10px 0 0 0;
    align-items: flex-end;
    justify-content: flex-start;

    &.bottom {
      padding-bottom: 20px;
    }
  }
  .flex-type-row {
    display: flex;
    flex-direction: row;
    flex-flow: nowrap;
  }
  .identifier-type-icon {
    cursor: pointer;
    align-self: end;
    color: var(--sz-search-button-filter-color);
    background-color: var(--sz-search-button-filter-background-color);
    border-color: var(--sz-search-button-filter-border-color);
    border-style: var(--sz-search-button-filter-border-style);
    border-radius: var(--sz-search-button-filter-border-radius);
    border-width: var(--sz-search-button-filter-border-width);
    font-size: var(--sz-search-button-filter-font-size);
    width: var(--sz-search-button-filter-width);
    height: var(--sz-search-button-filter-height);
    padding: var(--sz-search-button-filter-padding);
    margin-top: var(--sz-search-button-filter-margin-top);
  }
  .field {
    display: inline-block;
    flex-direction: column;
    padding-right: 20px;

    &.hidden {
      display: none;
    }

    &.disabled {
      color: var(--sz-disabled-label-color);
      label {
        color: var(--sz-disabled-label-color);
      }
      input, select {
        border-color: var(--sz-disabled-input-border-color);
        color: var(--sz-disabled-input-color);
        background-color: var(--sz-disabled-input-background-color);
      }
      input::placeholder, select::placeholder {
        color: var(--sz-disabled-input-color);
      }
    }

    label {
      white-space: nowrap;
      display: var(--sz-search-label-display);
      color: var(--sz-search-label-color);
      padding: var(--sz-search-label-padding);
      margin: var(--sz-search-label-margin);
      font-size: var(--sz-search-label-font-size);
    }
    &.name, &.address {
      width: 35%;
      flex-grow: 3;
      min-width: 35%;
    }
    &.dob, &.phone {
      width: 15%;
      max-width: 15%;
    }
    &.identifier {
      width: 20%;
    }
    &.type {
      width: 12%;
      min-width: 160px;
      /*border: 1px solid orange;*/
    }
    &.email {
      width: 31%
    }

    .identifier-dropdown {
      height: 40px;
      width: 100%; //117px;
      &.filter-showing {
        width: calc(100% - 20px);
      }
    }
    ::-webkit-input-placeholder {
      font-size: 13px;
    }
  }
}