Чередование массивов
 

По клику на кнопку, данные на странице должны обновляться (первый и второй массив должны чередоваться).
вот два массива
users: User[] = [
{name:'Rex 1',symbol: 'очень милая собака ',description: "https://fb.ru/misc/i/thumb/a/6/8/4/6/0/3/684603.jpg"},
{name:'Revo 2',symbol: 'очень крутой пес ',description: "http://www.trud.ru/userfiles/gallery/c1/b_c1295d1dad8d68be40c7f10e4f1b16c9.jpg"},
{name:'RevoGold 2',symbol: 'очень плохой пес ',description: "https://s1.stc.all.kpcdn.net/putevoditel/projectid_103889/images/tild3037-3231-4134-a333-303139306331__-5.jpg"},
{name:'Revo 2',symbol: 'очень крутой пес ',description: "http://www.trud.ru/userfiles/gallery/c1/b_c1295d1dad8d68be40c7f10e4f1b16c9.jpg"}
];
usersnew: User[] = [
{name:'Rex 1',symbol: 'оче ',description: "https://fb.ru/misc/i/thumb/a/6/8/4/6/0/3/684603.jpg"},
{name:'Revo 2',symbol: 'очень крeeeутой пес ',description: "http://www.trud.ru/userfiles/gallery/c1/b_c1295d1dad8d68be40c7f10e4f1b16c9.jpg"},
{name:'RevoGold 2',symbol: 'очень плооохой пес ',description: "https://s1.stc.all.kpcdn.net/putevoditel/projectid_103889/images/tild3037-3231-4134-a333-303139306331__-5.jpg"},
{name:'Revo 2',symbol: 'очень круууутой пес ',description: "http://www.trud.ru/userfiles/gallery/c1/b_c1295d1dad8d68be40c7f10e4f1b16c9.jpg"}
];
ВОТ HTML
<mat-card class="example-card" >
<mat-card >Simple card</mat-card>
<mat-card-header style="margin: 5px 10px 10px;" >
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title >{{user.name}}</mat-card-title>
<mat-card-subtitle> </mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="{{user.description}}" alt="Photo of a Shiba Inu">
<mat-card-content>
<p>
{{user.symbol}}
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>


По клику на кнопку, данные на странице должны обновляться (первый и второй массив должны чередоваться).
вот два массива
Как это сделать не могу сообразить