I found the solution, actually one of the comments helped me. I had a big array and then i took only a part of it and rendered it when the component loaded. When the more button is clicked I pushed the next set of data into the rendered array. When the more button was clicked I just had to change the index values of from and to in the main array, so only a few set of data got pushed into rendered array. *ngFor is absolutely awesome.
solved Perform ngFor after function invokes it?