> For the complete documentation index, see [llms.txt](https://enappd.gitbook.io/ionic-tinder-style-template/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://enappd.gitbook.io/ionic-tinder-style-template/how-to-use-this-template-1/modifying-code.md).

# Modifying Code

**Screen / View’s Code Structure**

![](/files/-M9hua4mjEwuRXm38SgU)

**4.2 Overall Folder Structure**

There are broadly 30+ pages in this template. All pages are shown in the src/app**/pages** folder above. Each page’s code is kept in a separate folder. Folder names are self-explanatory. You can create a page by executing the command

```
$ ionic cordova generate page your_page_name
```

This will create a folder of page name containing four files as -

In the case of Ionic 4, pages are generated with lazy loading by default which means a page has its own module.

```
├── enappd.html
├── enappd.module.ts
├── enappd.scss
└── enappd.ts
```

* `enappd.html`: contains UI components for the page.
* `enappd.scss`: contains sass styles to style your page.
* `enappd.ts`: contains TypeScript code

Components are kept in separate folder `src/app/components`

Services are kept in separate folder `src/app/services`

**4.3 Layout File Code Structure**

The layout file has the structure shown in the image.

• imports are written on the top.

• @component is the decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

• A constructor is used for dependency injections.

When the app loads the constructor gets called first then `ngOnInit`.

After constructor and inside the class we can write our logic for the page/component in `page.ts`

![](/files/-M9hww6UIlULQp6RHaZO)

**4.4. Styling Code Structure**

![](/files/-M9hwpdvoe1PXB2-dttF)

Style pages are generated by default for each page after executing page generate command, inside the page folder.

**4.5. Navigation Code Structure**

![](/files/-M9hwmE1wwGQ74xOXFuV)

On creating a project in Ionic 5 a file named `app-routing.module.ts` gets generated by default where all the navigation codes get done.\
We use the path name of a particular page to navigate from one page to another.-

**4.6 Nested Segment navigation**

![](/files/-M9hwi2jKhN3vVSKUXv0)

Controls the navigation of Segments (3 Segment buttons in the app). This is detailed in `src/app/home/home.page.ts`. All the settings of Segment Navigation can be controlled from here.