File
Implements
keys
|
Default value : _.keys
|
|
import { Component, OnInit } from '@angular/core';
import * as _ from 'lodash';
import { ChooserService } from '../shared/chooser.service';
@Component({
selector: 'hi-helix-list',
templateUrl: './helix-list.component.html',
styleUrls: ['./helix-list.component.scss'],
})
export class HelixListComponent implements OnInit {
groups: any;
keys = _.keys;
constructor(protected service: ChooserService) {}
ngOnInit() {
this.service.getAll().subscribe((data) => (this.groups = data));
}
}
<!--
~ 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.
-->
<mat-card *ngFor="let group of keys(groups)">
<mat-card-header>
<mat-card-title>{{ group | titlecase }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<section *ngFor="let section of groups[group]" class="section">
<a
*ngFor="let helix of keys(section)"
mat-button
[routerLink]="['/', group + '.' + helix]"
>
<mat-icon>group_work</mat-icon>
{{ helix }}
</a>
</section>
</mat-card-content>
</mat-card>
.section {
padding-bottom: 20px;
.mat-button {
width: 150px;
text-align: left;
}
}
.mat-card-title {
font-size: 20px;
}
Legend
Html element with directive