# Angular Folder Structure Standards · NG-01

## Standard Metadata

- Area: Angular
- Owner: Frontend Steering Group
- Last reviewed: 2026-09-09
- Next review due from: 2026-12-01
- Enforcement: Code review
- Status: Active

## Define separate files for component HTML and styles · NG-01.1 · **MUST**

There must be separate files for the component `html` and styles, to ensure the component typescript files only deal with the logic defined within them.

This has the added benefit of providing better intellisense and syntax highlighting in your IDE.

## Define functionality under the `components` folder · NG-01.2 · **SHOULD**

```
project
│   angular.json
│   package.json
│   ...
│
└─── src
│   │   main.ts
│   │   index.html
│   │   ...
│   │
│   └─── app
│   |   │
│   |   │
|   │   └─── components
|   │   |   │
|   │   |   │
|   │   |   └─── users
|   |   |       |    users.module.ts
|   |   |       |    users-routing.module.ts
|   |   |       |    ...
|   |   |       |
|   |   |       └─── components
|   |   |       |    |  users-add-dialog.component.ts
|   |   |       |    |  users-add-dialog.component.html
|   |   |       |    |  ...
|   |   |       |
|   |   |       └─── pages
|   |   |       |    |  users.component.ts
|   |   |       |    |  users.component.html
|   |   |       |    |  ...
|   |   |
|   |   |
|   |   └───  pipes
|   |   └───  guards
|   |   └───  interceptors
|   |   └───  directives
|   |   └───  services
|   |   └───  models
|   |   └───  ....
```

### Larger projects should define sub-folders by functionality or CRUD action · NG-01.3 · **SHOULD**

```
project
│   angular.json
│   package.json
│   ...
│
└─── src
│   │   main.ts
│   │   index.html
│   │   ...
│   │
│   └─── app
│   |   │
│   |   │
|   │   └─── components
|   │   |   │
|   │   |   │
|   │   |   └─── users
|   |   |       |    users.module.ts
|   |   |       |    users-routing.module.ts
|   |   |       |    ...
|   |   |       |
|   |   |       └─── components
|   |   |       |    |   add
|   |   |       |    |   |   users-add-dialog.component.ts
|   |   |       |    |   |   users-add-dialog.component.html
|   |   |       |    |  ...
|   |   |       |
|   |   |       └─── pages
|   |   |       |    |   search
|   |   |       |    |   |   users.component.ts
|   |   |       |    |   |   users.component.html
|   |   |       |    |  ...
|   |   |
|   |   |
|   |   └───  pipes
|   |   └───  guards
|   |   └───  interceptors
|   |   └───  directives
|   |   └───  services
|   |   └───  models
|   |   └───  ....
```