File
getProp
|
Default value : _.get
|
|
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>
.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 with directive