El problema que sufres es debido a que el contenido de la variable `DataUser` no se definirá hasta que se resuelva la promesa, por lo que no podrás acceder a sus propiedades hasta entonces.

Una manera de resolver este problema es accediendo a la información únicamente cuando ésta llegue usando [`async`](https://angular.io/api/common/AsyncPipe):

    <div class="data-user" *ngIf="DataUser | async as dataUser">
      <span>{{ dataUser.nombre }} </span>
      <span>{{ dataUser.apellido }} </span>
    </div>

Nota que el nombre de la variable ha cambiado de `DataUser` a `dataUser`.

Otra forma de hacerlo es a través de un valor inicial:

    ngOnInit(): void {
      /* Valor inicial hasta que lleguen los datos */
      this.DataUser = {
        nombre: '-',
        apellidos: '-'
      };
      //TRAER LOS DATOS DEL USUARIO EN SESION
      this.user.userData()
      .subscribe(
         res =>{
           this.DataUser = res
         },
         err =>{
           console.log(err);
         }
      );
    }

Una tercera, aunque no te recomiendo acostumbrarte a ella, es hacer uso del operador `?`:

    <div class="data-user" *ngIf="DataUser | async as dataUser">
      <span>{{ (DataUser | async)?.nombre }} </span>
      <span>{{ (DataUser | async)?.apellido }} </span>
    </div>