poniedziałek, 14 maja 2018

How to compare entity id and route param in angular.

Get param from url:


1
2
3
    this.subscription = this.route.params.subscribe((params) => {
      this.deskId = params['id'];
    });

Compare it with some other id like:


1
this.desks[i].id


1
2
3
4
5
if (this.desks[i].id === this.deskId) {
 console.log('true');
} else {
console.log('false');
}

- suprisingly got false.


Cast param to number:

1
this.deskId*1


then


1
2
3
4
5
if (this.desks[i].id === (this.deskId*1)) {
 console.log('true');
} else {
console.log('false');
}

got true.

piątek, 11 maja 2018

How to create responsible equal height tiles in Angular 5 and Bootstrap 4


1
2
3
4
5
6
7
8
    <div class="row">
        <div *ngFor="let desk of subDesks | orderBy : 'description'; trackBy: trackId"  
         class="col-sm-6 col-md-4 col-lg-2 py-2">
            <div class="card card-body h-100 d-flex justify-content-center align-items-center bg-success text-white">
                 <h5 class="card-title text-center d-flex">{{desk.description}}</h5>
            </div>
        </div>
    </div>

How to include <jhi-*></jhi-*> selector on home page in JHipster 4

Create panel.component.html:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 <div class="row">
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-2">
   <div class="card bg-success text-white">
    <div class="card-body">
     <h5 class="card-title text-center">Card 1</h5>
    </div>
   </div><br>
  </div>
 </div>


Create panel.component.ts:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import { Component, OnDestroy, OnInit } from '@angular/core';

@Component({
    selector: 'jhi-panel',
  templateUrl: './panel.component.html',
})
export class PanelComponent implements OnInit, OnDestroy {
    alerts: any[];

    constructor() { }

    ngOnInit() {
    }

    ngOnDestroy() {
    }

}


Add PanelComponent to app/shared/shared.common.module.ts in:

  • declarations
  • exports


Add 

    <jhi-panel></jhi-panel>

anywhere in home.component.html.