My coding dilemma goes something like this:-
Within the interface folder, I have created a book.ts file with properties. However, my book.component.ts is not recognizing the book.ts property. It seems to work fine when I import the interface (book.ts) directly into the book.component.ts file, but I prefer to keep the interface outside of the component file. How can I access this interface from my component file?
Below is a snippet of my code:-
app/interfaces/book.ts
interface Book
{
id: number;
title: string;
description: string;
author: string;
rate?: number;
dateStart?: Date;
dateRead? : Date;
}
app/component/books.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-books',
templateUrl: './books.component.html',
styleUrls: ['./books.component.css']
})
export class BooksComponent implements OnInit {
public books: Book[];
constructor() { }
ngOnInit(): void {
}
}
Upon running the application, I encountered the following error:-
https://i.sstatic.net/RLlZe.png
Folder Structure:-
https://i.sstatic.net/ROREI.png
Can anyone provide assistance in resolving this issue?
UPDATE
import { Component, OnInit } from '@angular/core';
import { Book } from '../interfaces/book'
@Component({
selector: 'app-books',
templateUrl: './books.component.html',
styleUrls: ['./books.component.css']
})
export class BooksComponent implements OnInit {
public books: Book[];
constructor() { }
ngOnInit(): void {
}
}
export interface Book
{
id: number;
title: string;
description: string;
author: string;
rate?: number;
dateStart?: Date;
dateRead? : Date;
}
New Error:-