How to correctly add a new post first in the array of posts?

Question

Angular

I add a post using the getPictures() method on the GalleryComponent (it's the parent component) whose "post.id" is greater than 10 first in the list, and add all other posts "post.id" less than 10 one by one. I do this using a condition in the getPictures() method, but when I delete a post, the number of posts whose ID is greater than 10 is added, and only after reloading the page, the previously selected post and those that were added after clicking the delete button are correctly removed. Tell me how to correctly add a new element first to the list, so that there would be no this bug. Please help me to solve this problem
Code of parent component GalleryComponent:

export class GalleryComponent implements OnInit {
    collection: Picture[];
    constructor(private galleryService: GalleryService) {
    }

    ngOnInit() {
        this.getPictures();
    }

    getPictures() {
        this.galleryService.getPictures().subscribe((data: Picture[]) => {
            data.forEach(post => {
                if (post.id > 10) {
                    this.collection.unshift(post);
                } else {
                    this.collection.push(post);
                }
            });
        })
    }
    removePost(picId: number): void {
        this.galleryService.remove(picId).subscribe(res => {
            console.log('Deleted');
            this.getPictures();
        })
    }
}

Template of the parent component GalleryComponent link to the component GalleryAddComponent:

<a routerLink="/gallery-add" class="btn btn-outline-success tog">
                    Add New Post
                </a>

GalleryAddComponent child component code:

export class GalleryAddComponent implements OnInit {
    isAdded: boolean = false;
    constructor( private galleryService: GalleryService) {}

    ngOnInit() {}
    
    addPost(title: string, url: string): void {
        this.galleryService.add(title, url).subscribe(res => {
            this.isAdded = true;
        });
    }
}

GalleryService with requests to the server:

export class GalleryService {
    galleryUrl: string = 'http://localhost:5555/posts';
    httpOptions: object = {
        headers: new HttpHeaders({'Content-Type': 'application/json'})
    };
    constructor(private http: HttpClient) {}

    getPictures(): Observable<Picture[]> {
        return  this.http.get<Picture[]>(`${this.galleryUrl}`);
    }

    remove(picId: number): Observable<Picture> {
        return this.http.delete<Picture>(`${this.galleryUrl}/${picId}`, this.httpOptions);
    }

    add(title: string, url: string): Observable<Picture> {
        const  postObj = {
          title,
            url
        };
        return this.http.post<Picture>(this.galleryUrl, postObj, this.httpOptions);
    }
}

Answer 1

And why do you re-request the data after deleting the post (and do not clear the collection at the same time - because of this, the posts should be duplicated)? - much easier and faster to remove one element from the array.
Probably in removePost instead this.getPictures()there should be something like

this.collections.splice(this.collection.findIndex(n => n.id === picId), 1)

Answer 2

I'm sorry, I didn't fucking understand what you said about more than 10 and less than 10.
unshift() to add to the beginning, splice() to remove from anywhere in the array.
What exactly is the bug?