É um padrão de organização dos componentes da aplicação, separando cada módulo de acordo com sua responsabilidade.

É uma interface que não contem regras de negócios, somente dispara eventos para notificar mudanças de estado de dados resultantes da interface e faz somente o processamento de seus próprios dados.

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

@Component({
  selector: 'name',
  template: 
	`
		<h1>What is your name? !</h1> 
		<label for="name">Your name:</label>
	  <input type="text" id="name" name="name">
	`,
  styles: [``]
})
export class HelloComponent  {
  @Input() name: string;
}

No exemplo acima, a view ficaria responsável de apresentar o título h1 e receber informações inseridas no campo input, realizando modificações nesses dados caso for necessário.

É a representação dos objetos da aplicação, são interfaces desenhadas para realizar essa representação e seus valores serão alterados pelo Presenter.

export class User {
  id: number;
  name: string;
}

No caso acima nos temos um objeto chamado User, nele teremos o id único desde objeto e o campo nome que virá do input name definido na View.

É o mediador entre a View e Model mantendo a congruência e sincronização entre eles. Quando algo é alterado na View, o presentes deve acessar o Model associados e fazer essa atualização de dados.

// user.presenter.ts

export class UserPresenter {
	this.user = new User();
	this.user.id = 0;

	getName(): string {
		return this.user.name;
  }
  setName(name: string): User {
    this.user.name = name;
		return this.user;
  }
}