CODEWITHSUNDEEP
angulartypescriptinterface
bali
bali

Reputation: 337

How to import Interface into angular component from models

When i try to access data of an interface into a component it gives error: error TS2304: Cannot find name 'Contacts'

and when i try to import that interface it says: error TS2307: Cannot find module '../models/contacts'.

I used an Interface(Contacts) to make some data available for a component(contact-list.component.ts)

Please tell me what I am doing wrong by looking at below code snippets. I am stuck with this Hands on from last two days, pls help

 ----------model contacts.ts------------
 export interface Contacts {
  contactsList: Contact[];
}

export interface Contact {
id: number;
name: string;
city: string;
}

 -----------app.module.ts----------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ContactService } from 'src/app/services/contact.service';

import { AppComponent } from './app.component';
import { ContactListComponent } from './components/contact-list/contact- 
list.component';

 @NgModule({
   declarations: [
   AppComponent,
   ContactListComponent
   ],
  imports: [
  BrowserModule,
],
   providers: [ContactService],
  bootstrap: [AppComponent]
})
export class AppModule { }




---------------contact-list.component.ts---------------

import { Component, OnInit } from '@angular/core';
import { ContactService } from 'src/app/services/contact.service';
import { Contacts } from '../models/contacts';

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

  contacts;
  constructor(
  private contactService: ContactService
  ) { }

 ngOnInit() {
   this.contactService.getContacts().subscribe((data: Contacts) => {
     this.contacts = data ? data.contactsList : [];
  });
 }

}
 --------------------contact.service.ts--------------------
import { Injectable } from '@angular/core';
import { of, Observable } from 'rxjs';
import { Contacts } from '../models/contacts';
@Injectable({providedIn: 'root'})
export class ContactService {

contacts = {
  'contactsList': [
      {'id': 1, 'name': 'Rajesh', 'city': 'bangalore'},
      {'id': 2, 'name': 'Aarjith', 'city': 'london'},
      {'id': 3, 'name': 'Anjan', 'city': 'california'},
      {'id': 4, 'name': 'David', 'city': 'delhi'}
    ]
 };
constructor(
) { }

getContacts(): Observable<Contacts> {
    return of(this.contacts);
   }
}

expected output: Rajesh Aarjith Anjan David

Upvotes: 1

Views: 5794

Answers (4)

Nand Kishor Mahto
Nand Kishor Mahto

Reputation: 26

This hands-on must be from fresco play I faced the same issue, there is nothing wrong in your code as if you try importing contacts like import { Contacts } from '../models/contacts'; it will not recognize contacts and if you try importing like import { Contacts } from 'src/app/models/contacts'; then online ide will create problem. you must have passed the hands on with the submission even with the error. and if you try it with local ide it will work fine.

Upvotes: 1

Dinesh Kumar
Dinesh Kumar

Reputation: 1

Please use full path:

import { Contacts } from 'src/app/models/contacts';

Upvotes: 0

Shafeeq Mohammed
Shafeeq Mohammed

Reputation: 1298

import { Component, OnInit, OnDestroy, ViewChildren } from '@angular/core';
import { dataService } from '../service/data.service';

interface UserInfo {
    id: number;
    userName: string;
    role: string;
    sourceName: string
}

@Component({
    selector: 'app-patient-view',
    templateUrl: './patient-view.component.html',
    styleUrls: ['./patient-view.component.css']
})

export class PatientViewComponent implements OnInit {
    constructor(private spinnerService: Ng4LoadingSpinnerService, private http: HttpClient, public dtService: dataService, private router: Router, private dialog: MatDialog) { }
    SourceNameSelector(oneSourceName) {
        this.http.get('/setSelectedSource/' + oneSourceName.id).subscribe(data => {
            ///code for return the source
            this.dtService.getUserDetails = {
                id: data['ID'],
                userName: data['USERNAME'],
                role: data['role'],
                sourceName: data['sourceName']
            };
        });
    }
}

this only tells you how to use interface in an .ts file

Upvotes: 0

rc.adhikari
rc.adhikari

Reputation: 2222

I reckon, you missing to reference the Contacts interface within the contact-list.component.ts file. That could be an issue.

Upvotes: 0

Related Questions