Bind interface with html in angular 2 with typescript

Question

Please Help me I want to bind an interface i.e

export interface IEmployee {
    code: string;
    name: string;
    gender: string;
}

with my Html i.e

<div class="col-lg-6">
    <div class="form-group">
        <label class="control-label">Code</label>
        <input type="text" class="form-control" [(ngModel)]="employees.code"/>
    </div>
    <div class="form-group">
        <label class="control-label">Name</label>
        <input type="text" class="form-control" [(ngModel)]="employees.name" />
    </div>
    <div class="form-group">
        <label class="control-label">Gender</label>
        <input type="text" class="form-control" [(ngModel)]="employees.gender" />
    </div>
    <div class="form-group">
        <input type="button" class="btn btn-primary" name="Add" value="Add" (click)="onClick(employees)"/>
    </div>
</div>

on button click I want to get input values from html to my class

import { Component,Input } from '@angular/core';
import { HttpModule } from '@angular/http';
import { IEmployee } from '../employee/employee';
import { HomeService } from './home.service';


@Component({
    selector:'my-home',
    templateUrl: 'app/home/home.component.html'

})

export class NewComponent
{
    employees: IEmployee;

    constructor(private _homeService: HomeService) {

    }

    onClick(employee: IEmployee) {
        this._homeService.Add(employee);
    }
}

but I am getting following error click here!! for the error

I think you should initialize the employee object; then only you can assign to a object. If i change to class instead of a interface and creating a new instance of employee it works. — Eldho
– Eldho, Commented Dec 17, 2017 at 16:41

Eldho · Accepted Answer · 2017-12-17 18:35:01Z

2

export class Employee implements IEmployee{
 code :string;
 name : string;

}

Component

export class NewComponent
{
  employee: Employee;

 constructor(private _homeService: HomeService) {
  employee = new Employee();
 }

//This interface will ensure basic information that IEmployee will be passed 
// to service
onClick(employee: IEmployee) {
    this._homeService.Add(employee);
  }
}

answered Dec 17, 2017 at 18:35

Eldho

8,3617 gold badges43 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bind interface with html in angular 2 with typescript

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related