Avaliação

[alanjhonnes]

Requisitos:

• Utilizar angular como framework para front-end;
• Utilizar boas práticas de criação de pastas/estruturação do projeto;
• Utilizar no mínimo 3 event-bindings;
• Utilizar no mínimo 2 interpolações;
• Utilizar sistema de rotas do angular para mudar de páginas;
• Deverá ter no mínimo 3 componentes;
• Deverá ter no mínimo 2 pages;
• Utilizar no mínimo 1 service;
• Utilizar no mínimo 2 pipes como currency e date; 1/2

Opcionais:

• Utilizar componente que usa ng-content;
• Utilizar rota lazy-loaded;

Comentários gerais:
Parabéns Bruna, o projeto ficou bom, vi que você também colocou animações nas páginas. Seria legal ter tentado trabalhar um pouco com Observables para simular requisições.

Algumas observações:
Aqui no cadastro você poderia ter feito um push no array de users do seu UsersService para simular o cadastro do usuário:

Vi que você está repetindo esse trecho de estilo em vários componentes, você pode mover as fontes para o styles.scss que representa os estilos globais e as variáveis scss podem estar em um arquivo reutilizável do scss.

Nos lugares que você está utilizando alguma lógica de autenticação, seria ideal ter encapsulado ela em uma service que seja responsável por armazenar o usuário logado:

O seu formulário de login poderia estar utilizar mais validadores como o de email e também só habilitar o botão após o formulário estar válido:

Vi que a maioria das pages está usando o app-header e app-footer, você poderia criar uma page que tenha a seguinte estrutura para essa área que tem o layout em comum:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

Esses seletores aninhados não são recomendados pois eles geram seletores muito grandes, de peso grande, pouco performáticos e com muito peso (difíceis de sobrescrever sem utilizar !important).

Ao invés deles, você pode utilizar seletores de classes sem aninhamento, e pode
Uma maneira melhor de utilizar é simplesmente não usar o aninhamento e representar a hierarquia pelo nome do seletor:

.section {
  ...
}

.section__wrapper {
  ...
}

.section__wrapper__mask {
  ...
}

Dessa forma todos os seletores tem o mesmo peso, o nome fica bem semântico (com significado) e fica mais performático, mas também fica mais extenso digitar tudo isso, mas esse só vai ser um problema no template, para simplificar essa escrita no SCSS podemos utilizar o operador de parent selector (&) para concatenar o seletor de cima. Reescrevendo ele utilizando esse operador ficaria assim:

..section {
  &__wrapper {
    ...
    &__mask {
    ...
    }
  }
}