Trying to filter out specific notes created on a selected date. The date format in the db.json files is '2023-08-14' and should match the input format...values are compared in the filter function.
The issue arises as nothing is added to the filtered array, possibly because the input isn't assigned to dateField. When trying to log the value, it appears as undefined. Any idea why it's not being saved? My files are listed below: TS File:
import { Component, OnInit } from '@angular/core';
import { Note } from '../note/notes';
import { NoteService } from '../note/notes.service';
//import {MatDatepickerModule} from '@angular/material';
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit{
allNotes: Note[] = [];
filteredNote: Note[] = [];
dateField: '';
constructor(private service: NoteService){}
ngOnInit(){
//retrieve all notes from NotesService
this.service.getAll().subscribe((data) => {
this.filteredNote = this.filterDate(data);
//console.log(this.filteredNote)
})
}
filterDate(data){
console.log(this.dateField);
return data.filter(_ => _.date == this.dateField);
}
}
html File:
<div class="main-container">
<label for="start">Find a Note from Date Created:</label>
<body>
<label>
Enter the Date:
<input type="date" name="date" [(ngModel)]="dateField">
<br>
</label>
</body>
<table class="table">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Title</th>
<th scope="col">Body</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let note of filteredNote">
<th scope="row">{{ note.id }}</th>
<th>{{ note.title }}</th>
<th>{{ note.body }}</th>
</tr>
</tbody>
</table>
</div>