How to update the list on screen - Picklist (Angular)

Question

HTML

    <app-navbar actor ="cord"></app-navbar>
<h1 class="center">Gerenciar Áreas de Atuação</h1>
<div class="largura">
<p-pickList [showTargetControls]="false" [showSourceControls]="false" [source]="list1" [target]="list2" [responsive]="true" sourceHeader="Áreas de Atuação" targetHeader="Áreas Selecionadas">
  <ng-template let-atuacao pTemplate="item">
      <div>
          <div style="font-size:14px">{{ atuacao }}</div>
      </div>
  </ng-template>
</p-pickList>
</div>
<div class="botaoSalvar">
  <button (click)="novaArea()" type='submit' class="waves-effect green darken-3 btn next">Nova Área de Atuação</button>
  <button type='submit' class="waves-effect blue-progress btn next">Salvar</button>
</div>

Typescript

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


@Component({
  selector: 'app-area-list',
  templateUrl: './area-list.component.html',
  styleUrls: ['./area-list.component.css']
})
export class AreaListComponent implements OnInit {

  list1!: any[];
  list2!: any[];

  ngOnInit(): void {
    this.list1 = ['Computação', 'Engenharia', 'Farmácia'];//initialize list 1
    this.list2 = [];//initialize list 2
  }

  novaArea(){
    this.list1.push("teste");
    console.log(this.list1)
  }
  
  
}

I added a "test" element to the list, associated with the click on a button. Internally the list is updated, but how do I update the list on the screen?