I've been attempting to apply a filter to my array by using modulo on the id when clicking multiple buttons. I initially tried using pipe but was advised to stick with .filter(). Despite watching numerous online tutorials, I keep encountering errors or complex solutions that don't quite fit my needs. Could it be that I am heading in the wrong direction for a straightforward onclick filter? As a newcomer to Angular, I find myself struggling with this concept.
import { Component, OnInit} from '@angular/core';
import { StreamService } from '../stream.service';
import { Stream } from '../stream';
import { map } from 'rxjs/operators';
@Component({
selector: 'app-discover',
templateUrl: './discover.component.html',
styleUrls: ['./discover.component.scss']
})
export class DiscoverComponent implements OnInit {
streams!: Stream[];
constructor(private streamService: StreamService) {
}
ngOnInit() {
this.getStreams();
}
getStreams(){
this.streamService.getStream().subscribe((data =>{
this.streams = data;
console.log(this.streams);
}))
}
sortBack(){
this.streams.sort((a, b) => a.id - b.id);
}
filterIsUneven(){
this.streams.filter(stream => stream.id % 3)
};
}
<div class="container">
<div class="buttons">
<button (click) = "filterIsUneven()"> Games </button>
<button> Music </button>
<button> Esports </button>
<button> IRL </button>
<button>Back</button>
</div>
<div class="streams" *ngFor="let stream of streams">
<h3>{{stream.id}}</h3>
<h3>{{stream.title}}</h3>
<img src="{{stream.thumbnailUrl}}">
</div>
</div>
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Stream } from './stream';
import { Observable} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class StreamService{
constructor(private http: HttpClient) { }
getStream():Observable<Stream[]>{
return this.http.get<Stream[]>("https://jsonplaceholder.typicode.com/albums/1/photos");
}
getLiveStream(id:number):Observable<Stream[]> {
const url = `https://jsonplaceholder.typicode.com/albums/1/photos?id=${id}`;
return this.http.get<Stream[]>(url);
}
}