Material Pagination not working as expected

[odd copper]

I am using material pagination to display some data
When I press on buttons they do not behave as expected, the browser seems to be giving some tips however I am a beginner and not really understanding what to do yet.
I was following an online tutorial here that I found on stack overflow pertaining this
https://stackblitz.com/edit/angular-2liy7w?file=app%2Fpaginator-configurable-example.ts,app%2Fpaginator-configurable-example.html

Here is my code

import { Component, OnInit, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PostServiceService } from '../post-service.service';
import { Subject, Observable, map } from "rxjs";
import * as _ from 'lodash';
import {MatPaginatorIntl, MatPaginatorModule, PageEvent} from '@angular/material/paginator';
import '@angular/material/core';

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})
export class PostListComponent implements OnInit{
  // Where posts are handled and displayed
  posts$: any;
  pageEvent: PageEvent;
  activePageDataChunk = [];
  length = 1000;
  pageSize = 10;
  pageSizeOptions = [5, 10, 25, 100];

  ngOnInit()  {
       this.postService.getfirst_post()
      .subscribe(posts => {this.posts$ = posts
        this.activePageDataChunk = this.posts$.slice(0, this.pageSize)
      }
      );
  }

  constructor(private postService: PostServiceService) {
   //this.activePageDataChunk = this.posts$.slice(0, this.pageSize)
  }

  setPageSizeOptions(setPageSizeOptionsInput: string) {
    this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
  }

  onPageChanged(e) {
    let firstCut = e.pageIndex * e.pageSize;
    let secondCut = firstCut + e.pageSize;
    this.activePageDataChunk = this.posts$.slice(firstCut, secondCut);
  }
}

[dry gazelle]

The stackblitz you posted doesn't match the code you have in the question. Post your code as a stackblitz. Then tell precisely what you're doing, what you exxpect to happen, and what happens instead. "they do not behave as expected" and "the browser seems to be giving some tips" are too vague. Tell precisely what you expect to happen and what happens instead. If the browser logs an error message, copy and paste the exact and complete error message, as text.

[odd copper]

Appologizes the discord length was giving a warning and I didnt notice I cut the description
As mentioned I am using pagination from angular material

I am using dummy json data in a service component

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, map } from "rxjs";
import * as _ from 'lodash';

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

@Injectable({
  providedIn: 'root'
})
export class PostServiceService {
  //Where posts come and are handled
  posts_source = 'https://jsonplaceholder.typicode.com/posts'

  constructor(private http: HttpClient) { }

  getfirst_post() {
    return this.http.get<Post[]>(this.posts_source)
    .pipe(map(posts => posts));
  }
}

So I use it to get the data the name of the method should change to just get posts here but the main functionality is it returns all the posts
next I then accesss it in my main component named post component
I will post it in the next message , then I will upload to stackblitz too

this is the postlist component as mentioned above the main component

import { Component, OnInit, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PostServiceService } from '../post-service.service';
import { Subject, Observable, map } from "rxjs";
import * as _ from 'lodash';
import {MatPaginatorIntl, MatPaginatorModule, PageEvent} from '@angular/material/paginator';
import '@angular/material/core';

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})
export class PostListComponent implements OnInit{
  // Where posts are handled and displayed
  posts$: any;
  pageEvent: PageEvent;
  activePageDataChunk = [];
  length = 1000;
  pageSize = 10;
  pageSizeOptions = [5, 10, 25, 100];

  ngOnInit()  {
       this.postService.getfirst_post()
      .subscribe(posts => {this.posts$ = posts
        this.activePageDataChunk = this.posts$.slice(0, this.pageSize)
      }
      );
  }

  constructor(private postService: PostServiceService) {
   //this.activePageDataChunk = this.posts$.slice(0, this.pageSize)
  }

  setPageSizeOptions(setPageSizeOptionsInput: string) {
    this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
  }

  onPageChanged(e) {
    let firstCut = e.pageIndex * e.pageSize;
    let secondCut = firstCut + e.pageSize;
    this.activePageDataChunk = this.posts$.slice(firstCut, secondCut);
  }
}

then this is the html component for it I use it to use pagination to display all the posts in a table

<table *ngIf="posts$">
  <thead>
    <tr>
      <th>post Id</th>
      <th>Title</th>
      </tr>
  </thead>
  <tbody>
    <tr *ngFor="let post of activePageDataChunk">
      <td>{{ post.id }}</td>
      <td>{{ post.title }}</td>
      </tr>
  </tbody>
</table>

<mat-paginator [length]="length" [pageSize]="pageSize" aria-label="Select page"
  [pageSizeOptions]="pageSizeOptions" (page)="onPageChanged($event)"
>
</mat-paginator>

<p *ngIf="!posts$">Error! <br> No User data found.</p>

This the error message I get

Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming

the app itself is working but the component is behaving wrong. I already have core theme installed I believe

Image one shows it looks fine
Image two shows upon pressing on the items per page item it shows the drop down menu far from the drop down menu location this is the bevahior I would like to change
Same happens with the Next page and prev page buttons

I will upload to stackblitz now

Hope this clears up my question

[dry gazelle]

So your issue is that it doesn't look nice and that you have CSS issues, right? So your whole TS code is basically irrelevant. Go to https://material.angular.io/ (that's the official web site for material), click "Get started", and read how to add material to an Angular app. Old posts in STackoverflow are either wrong or outdated. Use the official documentation.

[odd copper]

Not really
For example if I press a button here and I click anywhere else the menu still presents itself

this is not the inteded behvaior from the material pagination. I have read what you sent me and to be honest couldn't configure it well
Thank you for help tho

[dry gazelle]

So what don't you understand in the instructions at https://material.angular.io/guide/getting-started#install-angular-material?

Restart from scratch. Create a blank new project using ng new. Then follow the instructions there. Then create a component that uses mat-paginator.

[odd copper]

I will try setting from scratch indeed in a min then slowly add stuff to it till I see what causes this behavior

I will update here once I figure it out