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;

  }

}

HTML blueprint for Angular Flex Layout / Material

Kick-off blueprint for HTML/CSS design with Angular Flex Layout and Angular Material

Prerequisites:


@angular/flex-layout v9.0.0

@angular/material v8.2.3

1. HTML

     
  

  <div class="wrap-container">

         <div class="main-container" fxLayout="column" fxLayoutAlign="space-between center" fxLayoutGap="25vh">
            <div style="width:100%;">
                <div class="money-label">
                    Account balance
                </div>
                <div fxLayout="row" fxLayoutAlign="start center" class="margin">
                    <div class="free-money" fxFlex="80">
                        + 11.500 Euro
                    </div>
                    <div fxFlex="20" fxLayoutAlign="end">
                        <mat-icon>check_circle</mat-icon>
                    </div>
                </div>
                <div class="bottom-links margin" fxLayout="row" fxLayoutAlign="start end">
                    <div fxFlex="47">
                        <button mat-button class="bottom-links full-width">Analysis</button>
                    </div>
                    <div fxFlex="6"></div>
                    <div fxFlex="47" fxLayoutAlign="end">
                        <button mat-button class="bottom-links full-width">Profile</button>
                    </div>
                </div>
            </div>

            <div class="transaction-entry">
                <div fxLayout="row" fxLayoutAlign="start center" class="margin-top">
                    <div class="top-body" fxFlex="80">
                        Mo. | 16.5.2020 | 12:30
                    </div>
                </div>
                <div class="bottom-body" fxLayout="row" fxLayoutAlign="start end">
                    <div fxFlex="80">
                        Transaction #1:
                    </div>
                    <div fxFlex="20" fxLayoutAlign="end">
                        - 38,00
                    </div>
                </div>
            </div>

            <div style="width:100%;text-align: center">
                <button mat-button class="bottom-links full-width">Submit</button>
            </div>

         </div>
      </div>
     






2. CSS



 .wrap-container {

  height: 100%;
 }

.main-container {
  padding: 20px;
}

.full-width {
  width: 100%;
}

.button-margin {
  margin-right: 1.5vh;
}

mat-card {
  background-color: white;
  height: 100%;
  width: 100%;
  padding: 13.5vh;
}

.money-label {
  font-size: 2.08vh;
  color: lightgray;
}

.mat-button {
  background-color: orangered;
}

.free-money {
  font-size: 4.48vh;
}

.bottom-links {
  font-size: 2.08vh;
  color: white;
}

.margin {
  margin-bottom: 1.5vh;
}

button {
  overflow-x: hidden !important;
}

.transaction-entry {
  width: 100%;
}

.top-body {
  font-size: 2.08vh;
  color: lightgray;
}

.margin-top {
  margin-bottom: 0.5vh;
}

.bottom-body {
  font-size: 2.08vh;
  font-weight: bold;
}