Angular infinite scroll new objects replacing previous objects

See more:

angular-cli

I want to implement infinite scroll. When i scroll down the page the new fetched objects just replace previous fetched objects, but i want that i can scroll down infinite and new objects appear on scroll not just replace previous objects. Should i somehow push onScroll() function to lis: any = []; if so than how can i accomplish it? Full code - https://github.com/KristersgCode/test

What I have tried:

export class AppComponent implements OnInit {
  throttle = 0;
  distance = 2;
  page = 1;
  li: any;
  lis: any = [];

  constructor(private characterService: CharacterService) {}
  ngOnInit(): void {
    this.characterService.getCharacters(this.page).subscribe((Response) => {
      console.log(Response);
      this.li = Response;
      this.lis = this.li.results;
    });
  }
  onScroll(): void {
    this.characterService.getCharacters(++this.page).subscribe((Response) => {
      console.log("New fetch");
      this.li = Response;
      this.lis = this.li.results;
    });
  }

Services file

export class CharacterService {
  constructor(private http: HttpClient) {}

  getCharacters(page: number) {
    return this.http.get(
      `https://rickandmortyapi.com/api/character?page=${page}&per_page=20`
    );
  }
}