### File

`src/app/shared/key-value-pairs/key-value-pairs.component.ts`

### Metadata

selector | `hi-key-value-pairs`
styleUrls | `./key-value-pairs.component.scss`
templateUrl | `./key-value-pairs.component.html`

### Index

###### Properties
getProp pairs
###### Inputs
obj

### Inputs

obj
Type : `any`
Defined in src/app/shared/key-value-pairs/key-value-pairs.component.ts:30

### Properties

getProp
Default value : `_.get`
Defined in src/app/shared/key-value-pairs/key-value-pairs.component.ts:25

pairs
Type : `QueryList<KeyValuePairDirective>`
Decorators : `@ContentChildren(KeyValuePairDirective)`
Defined in src/app/shared/key-value-pairs/key-value-pairs.component.ts:28

    import {
      Component,
      ContentChildren,
      Directive,
      Input,
      QueryList,
    } from '@angular/core';

    import * as _ from 'lodash';

    // good doc: https://angular.io/docs/ts/latest/api/core/index/ContentChildren-decorator.html

    @Directive({ selector: 'hi-key-value-pair' })
    export class KeyValuePairDirective {
      @Input() name: string;
      @Input() prop: string;
    }

    @Component({
      selector: 'hi-key-value-pairs',
      templateUrl: './key-value-pairs.component.html',
      styleUrls: ['./key-value-pairs.component.scss'],
    })
    export class KeyValuePairsComponent {
      getProp = _.get;

      @ContentChildren(KeyValuePairDirective)
      pairs: QueryList<KeyValuePairDirective>;

      @Input() obj: any;
    }

    <!--
      ~ Licensed to the Apache Software Foundation (ASF) under one
      ~ or more contributor license agreements.  See the NOTICE file
      ~ distributed with this work for additional information
      ~ regarding copyright ownership.  The ASF licenses this file
      ~ to you under the Apache License, Version 2.0 (the
      ~ "License"); you may not use this file except in compliance
      ~ with the License.  You may obtain a copy of the License at
      ~
      ~     http://www.apache.org/licenses/LICENSE-2.0
      ~
      ~ Unless required by applicable law or agreed to in writing,
      ~ software distributed under the License is distributed on an
      ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
      ~ KIND, either express or implied.  See the License for the
      ~ specific language governing permissions and limitations
      ~ under the License.
      -->

    <section class="groups" fxLayout="row">
      <section class="column" *ngFor="let pair of pairs">
        <div class="name">{{ pair.name }}</div>
        <div class="value" *ngIf="obj != null && getProp(obj, pair.prop) != null">
          {{ getProp(obj, pair.prop) }}
        </div>
        <div class="value" *ngIf="obj == null || getProp(obj, pair.prop) == null">
          N/A
        </div>
      </section>
    </section>

`./key-value-pairs.component.scss`

    .groups {
      font-size: 14px;
      line-height: 14px;

      .column {
        padding-left: 40px;
      }

      .name {
        font-size: 12px;
        line-height: 12px;
        color: rgba(0, 0, 0, 0.54);
      }
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""