Como se muestra en la figura, el módulo author declara 4 componentes, provee un servicio, reutiliza del módulo book el componente de listar los libros, importa el módulo book (debido al componente que reutiliza) e importa el modulo que define las rutas de la aplicación. Así mismo, importa varios módulos externos (en amarillo).

Vamos aver en más detalle el componente de editar un autor.

En este ejemplo, estamos definiendo las opciones de editar, salvar y cancelar con iconos. Cuando el usuario selecciona el lápiz para editar se muestra el formulario con la información del author que seleccionó. Puede cambiar cualquiera de los valores y salvar o cancelar. En cualquiera de los casos, desaparece el formulario y se regresa a la lista de autores.

El siguiente diagrama muestra los elementos que participan en el diseño del componente.

El componente inyecta tres servicios , los define en el constructor y cada uno de ellos es @Injectable():

1. DatePipe: Permite formatear los atributos de tipo Date.
2. ToastrService: Permite desplegar e mensaje de actualización exitosa o de cancelación. El error es interceptado por el componente HttpInterceptorError.
3. AuthorService: Define el servicio updateAuthor.

export class AuthorEditComponent implements OnInit, OnChanges {
    constructor(
        private dp: DatePipe,
        private authorService: AuthorService,
        private toastrService: ToastrService,
    ) {}
    ...

El componente recibe de entrada el objeto AuthorDetail que se va a editar.

export class AuthorEditComponent implements OnInit, OnChanges {

 ...
  @Input() author: AuthorDetail;
 ...

En nuestro ejemplo, quien hace el llamado a este componente y le envía el autor seleccionado, es el template del componente AuthorListComponent. En la siguiente figura mostramos, al lado izquierdo, el template de listar autores que utiliza el selector del componente de editar:

En la clase del componente AuthorEditComponent, el atributo anotado con @Input es author, el que va en [author] y el valor que se le da, es el que el usuario seleccionó: selectedAuthor(Ver el código más adelante).

Es en el template de listar autores donde se controla si el template de edición se muestra o no. Se muestra cuando el usuario hace clic en el ícono de edición, en este ejemplo el lápiz, y se oculta cuando el usuario hace clic en update o en cancelar. Sin embargo, update y cancel son elementos del template de editar autor, entonces para eso se define que las salidas del componente son un evento de cancel o update. Cuando el usuario hace clic en update se debe llamar el método de updateAuthor(). El template de listar "oye" los eventos. En el código html:

... 
  <div *ngIf="showEdit">
   <app-author-edit [author]="selectedAuthor" (cancel)="showHideEdit(selectedAuthor.id)" 
                                              (update)="updateAuthor()" >
   </app-author-edit>
  </div>
...

En el código anterior: