Pasar valores de un listbox a otro con Angular

app.component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-filtroavanzado',
  templateUrl: './filtroavanzado.component.html',
  styleUrls: ['./filtroavanzado.component.css']
})
export class FiltroavanzadoComponent implements OnInit {
  sucursales = [];
  sucursales_sel = [];
  sel_origen = [];
  sel_destino = [];

  constructor() { }

  ngOnInit() {
    this.sucursales.push({name: 'Maria', value: 1});
    this.sucursales.push({name: 'Juan', value: 2});
    this.sucursales.push({name: 'Pedro', value: 3});
    this.sucursales.push({name: 'Arturo', value: 4});
    this.sucursales.push({name: 'Fernando', value: 5});
    this.sucursales.push({name: 'Diego', value: 6});
  }

  agregar() {   
      this.sel_origen.forEach(item => {       
        let server = this.sucursales.find(x => x.value === parseInt(item));

        let elem = this.sucursales_sel.find(x => x.value === parseInt(server.value));

        if (elem == undefined)
           this.sucursales_sel.push(server);                 
      });
  }

  quitar() {     
    this.sel_destino.forEach(item => {
      let x = this.sucursales_sel.find(x => x.value);
      this.sucursales_sel.splice(x, 1);
    })
  } 
}

interface Item {
  name: string;
  value: number;
}


app.component.html

<div>
  <div>
    <select [(ngModel)]="sel_origen" name="origen" multiple="multiple">
      <option *ngFor="let x of sucursales" value={{x.value}}>{{x.name}}</option> 
    </select>
  </div>
  <div> 
      <button (click)='agregar()'>agregar</button>
      <button (click)='quitar()'>quitar</button>
  </div>

  <select [(ngModel)]="sel_destino" name="destino" multiple="multiple">
      <option *ngFor="let x of sucursales_sel" value={{x.value}}>{{x.name}}</option> 
  </select> 
</div>