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;

  }

}