How to display object data in child component from parent in angular

Question

I am a beginner in Angular. I have created a demo app. below is my code

servers.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Server } from './server.model';
@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css'],
})
export class ServersComponent implements OnInit {
  allowNewServer = false;
  serverCreationStatus = 'no server created';
  serverName = '';
  ipAddress = '';
  owner = '';
  server: Server[] = [];
  serverCreated = false;
  constructor() {

  }
  ngOnInit(): void {}

  onCreateServer() {
    this.serverCreated = true;
    this.serverCreationStatus = 'server created';
    this.server_list.push(server;
    }
}

I have one model file where i have declared one class and constructor to create server

server.model.ts
export class Server {
  public serverName: string;
  public ipAddress: string;
  public owner: string;

  constructor(ame: string, ip: string, owner: string) {
    this.serverName = name;
    this.ipAddress = ip;
    this.owner = owner;
  }
}

in servers.component.html i am using ngModel to bind object property with forms field servers.component.html

<form action="">
    <div class="row">
      <label for="serverName" class="col-sm-2">Server Name</label>
      <input
        type="text"
        class="form-control col-sm-10"
        [(ngModel)]="server.serverName"
        [ngModelOptions]="{ standalone: true }"
      />
    </div>
    <div class="row">
      <label for="ipAddress" class="col-sm-2">IP Adress</label>
      <input
        type="text"
        class="form-control col-sm-10"
        [(ngModel)]="server.ipAddress"
        [ngModelOptions]="{ standalone: true }"
      />
    </div>
    <div class="row">
      <label for="owner" class="col-sm-2">Owner</label>
      <input
        type="text"
        class="form-control col-sm-10"
        [(ngModel)]="server.owner"
        [ngModelOptions]="{ standalone: true }"
      />
    </div>
    <button
      class="btn btn-primary"
      [disabled]="!allowNewServer"
      (click)="onCreateServer()"
    >
      Add server
    </button>
  </form>
<app-server *ngFor="let s of server" [data]="s"> </app-server>




and my child component `server.component.ts`

import { Component, Input } from '@angular/core';
import { Server } from '../servers/server.model';
@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styles: [
    `
      .online {
        color: white;
      }
    `,
  ],
})
export class ServerComponent {
  serverStatus = 'offline';
  @Input() data: Server;

  constructor() {
    this.serverStatus = Math.random() > 0.5 ? 'online' : 'offline;';
  }
  getColor() {
    return this.serverStatus === 'online' ? 'green' : 'red';
  }
}

my server.component.html

<p
  [ngStyle]="{ backgroundColor: getColor() }"
  [ngClass]="{ online: serverStatus === 'online' }"
>
  Server created with name {{ data }}
</p>

i am gettig two error in above code

when using ngModel in servers.component.html

error TS2339: Property 'ipAddress' does not exist on type 'Server[]'.

34 [(ngModel)]="server.ipAddress"

getting this error for all field

2.not able to display created server data (not able to pass object data to child component) calling child component in servers.component.html

Please help. Thanks in advance

Server created with name {{ data }} should be {{ data.serverName }}, you can not bind the Object with string interpolation. — Ramana, May 08 '20 at 05:18

Ramana · Answer 1 · 2020-05-08T15:00:38.877

You have too many typos and errors, Here is the updated servers and server component classes, Compare this with your question and you can figure out the differences and errors. Hope this works !!

servers.component .ts & .html:

.html:

<form action="">
  <div class="row">
    <label for="serverName" class="col-sm-6">Server Name</label>
    <input
      id="serverName"
      type="text"
      class="form-control col-sm-10"
      [(ngModel)]="serverName"
      [ngModelOptions]="{ standalone: true }"
    />
  </div>
  <div class="row">
    <label for="ipAddress" class="col-sm-6">IP Adress</label>
    <input
      id="ipAddress"
      type="text"
      class="form-control col-sm-10"
      [(ngModel)]="ipAddress"
      [ngModelOptions]="{ standalone: true }"
    />
  </div>
  <div class="row">
    <label for="owner" class="col-sm-6">Owner</label>
    <input
      id="owner"
      type="text"
      class="form-control col-sm-10"
      [(ngModel)]="owner"
      [ngModelOptions]="{ standalone: true }"
    />
  </div>
  <button
    class="btn btn-primary"
    (click)="onCreateServer()">
    Add server
  </button>
</form>
<app-server *ngFor="let s of server" [data]="s"> </app-server>

.ts:

import { Component, OnInit } from '@angular/core';
import {Server} from '../../models/Server.model';

@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css']
})
export class ServersComponent implements OnInit {

  allowNewServer = false;
  serverCreationStatus = 'no server created';
  serverName = '';
  ipAddress = '';
  owner = '';
  server: Server[] = [];
  serverCreated = false;
  constructor() {

  }
  ngOnInit(): void {}

  onCreateServer() {
    this.serverCreated = true;
    this.serverCreationStatus = 'server created';
    this.server.push(new Server(this.serverName, this.ipAddress, this.owner));
  }
}

server.component .ts & .html:

.html:

<p
  [ngStyle]="{ backgroundColor: getColor() }"
  [ngClass]="{ online: serverStatus === 'online' }">
  Server created with name {{ data.serverName }}
</p>

.ts:

import {Component, Input} from '@angular/core';
import {Server} from '../../models/Server.model';

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

  @Input() data: Server;
  serverStatus = 'offline';

  constructor() {
    this.serverStatus = Math.random() > 0.5 ? 'online' : 'offline;';
  }
  getColor() {
    return this.serverStatus === 'online' ? 'green' : 'red';
  }
}

finally Server model class:

export class Server {
  public serverName: string;
  public ipAddress: string;
  public owner: string;

  constructor(name: string, ipAddress: string, owner: string) {
    this.serverName = name;
    this.ipAddress = ipAddress;
    this.owner = owner;
  }
}

How to display object data in child component from parent in angular

1 Answers1