kevinchisholm

<app-first-child *ngFor ="let thisEntry of firstFormEntry"
[formEntry]="thisEntry"></app-first-child>

kevinchisholm

<app-first-child [formEntry]="firstFormEntry[0]"></app-first-child>

kevinchisholm

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

@Component({
    selector: 'displaying-entries',
    templateUrl: './display-entries.component.html',
    styleUrls: ['./display-entries.component.css']
})
export class DisplayEntries {

kevinchisholm

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MyFirstComponent } from './my-first.component';
import { DisplayEntries } from './display-entries.component';

@NgModule({
  declarations: [
    AppComponent, 

kevinchisholm

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
}

kevinchisholm

<displaying-entries></displaying-entries>

kevinchisholm

<app-first-child [formEntry]="firstFormEntry"></app-first-child>

kevinchisholm

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

@Component({
  selector: 'displaying-entries',
  templateUrl: './display-entries.component.html',
  styleUrls: ['./display-entries.component.css']
})
export class DisplayEntries {
  firstFormEntry = {
    id: 1,

kevinchisholm

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  firstFormEntry = {
    id: 1,

kevinchisholm

<p *ngIf="formEntry.name">The name is {{formEntry.name}} </p>
<p *ngIf="formEntry.address">The address is {{formEntry.address}} </p>

<ng-template [ngIf] = "formEntry.phone">
    <p>The phone number is</p>
    <p> {{formEntry.phone}} </p>
</ng-template>