NG8 - Model , Interface based API response in component and Service

NG8 - Model , Interface based API response in component and Service
=====================================================================

model-data.ts
==============
export interface ModelData{
 id: string;
 name: string;
 dept: string;
 salary: number;
 doj:any;
}

model-response.ts
==================

import { ModelData } from './model-data';

export interface {

 status: string;
 statusDetails: string;
 responseCount: number;
 data: ModelData[];
}


app.component.ts
=================
import { AppService } from './app.service';
import { ModelResponse } from './model-response';
import { ModelData } from './model-data';

@Component({
selector: 'app',
templateUrl:'./component.html',
styleUrls:['./component.less']

export class AppComponent implements OnInit, OnDestroy {

 resData : ModelData[];
 constructor( private appServiceDI: AppService){

 }
ngOnInit() {
// load data from API
this.appServiceDI.get_listData().subcribe( (res: ModelResponse)  =>{
if(res.status){
this.resData = res.data;
}
else{
this.resData = [];
},
(error) => {
this.resData = [];
console.log(error);
}
}
}
}

app.service.ts
================

import { ModelResponse } from './model-response';

@Injectable()

export class AppService{

 constructor( private http: HttpClient )

 get_listData():Observable(<any>){
    return this.http.get<ModelResponse>('apiUrl').map(
      res => {
        const data = res;
        return data;
      });
  }
 
}

app.component.html
====================

<h4> to display Employee details </h4>

<div *ngFor="let emp of resData"> 
  <div>
<span>{{ emp.id }}</span>   <span>{{ emp.name }}</span>
  </div>
</div>