Conditional HTML display with ngTemplate

Show/hide HTML with ngTemplate

If no elements are retrieved, show "No Data"message.

To simulate this, click on Toggle to update a 'noData' flag

Clicking on Toggle simulates no-data case:

1. Component - HTML

<button mat-button (click)="toggleDisplay()"> Toggle </button>
<div *ngIf="this.noData; then noDataMessage else mainDisplay"></div>
<ng-template #mainDisplay>
    <br/><br/>
    <p>All cars:</p>
    <br/>
    <div *ngFor="let car of cars">
        {{car.name}} - {{car.brand}} - {{car.type}}
    </div>
</ng-template>
<ng-template #noDataMessage>
    <br/><br/>
    <div>
    No data available
    </div>
</ng-template>

2. Component - TS

import {Component, OnInit} from '@angular/core';

interface ICar {
  name: string,
  brand: string,
  type: string
}
@Component({
  selector: 'jhi-test-comp',
  templateUrl: './test-comp.component.html',
  styleUrls: ['./test-comp.component.scss']
})
export class TestCompComponent implements OnInit {
  noData = false;
  cars: ICar[] = [{name: 'i10', brand: 'Hyundai', type: 'gasoline'}, {name: 'swift', brand: 'Suzuki', type: 'gasoline'}, {name: 'Y', brand: 'Tesla', type: 'electric'}];
  constructor() {
  }
  ngOnInit(): void {
  }
  toggleDisplay(): void {
    this.noData = !this.noData;
  }
}

3. Component - CSS

.mat-button {
  border-radius: 30px;
  font-size: 2.08vh;
  background-color: #3339ea;
  color: white;
  width: 10%;
}

Display Child components inside a Parent component

Display Child components inside a Parent component

1. Parent Component - HTML

<div fxLayout="column" fxLayoutAlign="space-between stretch">

    <div *ngIf="allPersonItems.length">
        <div class="person-entry-container">
            <div class="person-card" *ngFor="let person of allPersonItems">
                <jhi-person-entry [name]="person.name"
                                    [surname]="person.surname"
                                    [address]="person.address">
                </jhi-person-entry>
            </div>
        </div>

    </div>


</div>

2. Parent Component - TS

import {Component, OnInit} from '@angular/core';

export interface IPersonItem {

  name: string;

  surname: string;

  address?: string;

}

@Component({

  selector: 'jhi-contracts-overview',

  templateUrl: './contracts-overview.component.html',

  styleUrls: ['./contracts-overview.component.scss']

})

export class PersonsOverviewComponent implements OnInit {

  allPersonItems: IPersonItem[] = [

    {name: 'Peter', surname: 'Schmidt', address: 'Frankfurt'},

    {name: 'Amanda', surname: 'Anderson', address: 'New York'},

    {name: 'George', surname: 'Black', address: 'Dublin'}

  ];

  constructor() {}

  ngOnInit(): void {}

}

3. Parent Component - CSS

@mixin card-view {

  border-radius: 1vw;

  background-color: #ffffff;

}

.person-card {

  @include card-view;

  margin: 1.23vh 1vw;

  display: block;

}

.person-entry-container {

  height: 70vh;

  overflow: scroll;

  padding-left: 1.3vh;

  padding-right: 1.3vh;

}

4. Child Component - HTML

<div class="person-entry" fxLayout="row" fxLayoutAlign="start center">

    <div fxFlex="8"><mat-icon>phone_android</mat-icon></div>

    <div fxFlex="57">

        <div class="gray-style">{{name}}</div>

        <div class="bold margin-top">{{surname}}</div>

        <div class="gray-style margin-top">{{address}}</div>

    </div>

</div>

5. Child Component - TS

import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';

@Component({

  selector: 'jhi-person-entry',

  templateUrl: './person-entry.component.html',

  styleUrls: ['./person-entry.component.scss'],

  encapsulation: ViewEncapsulation.None

})

export class PersonEntryComponent implements OnInit {

  @Input()

  name = '';

  @Input()

  surname = '';

  @Input()

  address = '';

  constructor() {}

  ngOnInit(): void {}

}

6. Child Component - CSS

.person-entry {

  width: 100%;

  padding: 1.56vh;

  .margin-top {

    margin-top: 0.5vh;

  }

  .gray-style {

    color: gray;

  }

  .mat-icon {

    font-size: 6vw;

  }

  div {

    font-size: 2.08vh;

    line-height: 2.6vh;

  }

  .bold {

    font-weight: bold;

  }

}

Angular Filter array of elements with Pipe

Display filtered array elements by search term with Pipe

1. Component - HTML

.....

 <input [(ngModel)]="searchParam" matInput [type]="'text'"> 

<div *ngFor="let item of allItems | itemFilter : searchParam">
          <your-item-entry [property1]="item.property1" 
                                    [property2]="item.property2"
                                    [property3]="item.property3"
                                    [property4]="item.property4">
           </your-item-entry>

 </div>

2. Component - TS

...

 allItems: IYourItem[] = []

// fetch your items here

searchParam = '';

...

3. Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({

  name: 'ItemFilter'

})

export class ItemFilterPipe implements PipeTransform {

  transform(allItems: IYourItem[], searchText: string): any[] {

    if (!allItems) return [];

    if (!searchText) return allItems;

// Returns items containing search value (e.g. "codeinpackets") in either of their fields1-4

    searchText = searchText.toLowerCase();

    return allItems.filter(i => {

      return (i.field1 != null && i.field1.toLowerCase().includes(searchText) ||

        (i.field2 != null && i.field2.toLowerCase().includes(searchText)) ||

        (i.field3 != null && i.field3.toLowerCase().includes(searchText)) ||

        (i.field4 != null && i.field4.toLowerCase().includes(searchText))

      );

    });

  }

}

Dynamic CSS with Angular ViewChild, Renderer2

Control element CSS programmatically with ViewChild and Renderer2

1. Input is visible initially

2. Input is hidden with ViewChild

1. Component - HTML

<div>
    Container...
    <div #elementRef>
        <input matInput type="text" value="some data.."/>
        <button mat-button>&nbsp;</button>
    </div>

</div>

2. Component - TS

import {AfterViewInit, Component, ElementRef, OnInit, Renderer2, ViewChild} from '@angular/core';

@Component({

  selector: 'jhi-test-comp',

  templateUrl: './test-comp.component.html',

  styleUrls: ['./test-comp.component.scss']

})

export class TestCompComponent implements OnInit,AfterViewInit {

  @ViewChild('elementRef', { static: false })

  elementRef?: ElementRef;

  constructor(private renderer: Renderer2) { }

  ngOnInit(): void {}

  ngAfterViewInit(): void {

    if (this.elementRef) {

      this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'none');

    }

  }

}