# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://enappd.gitbook.io/ionic-tinder-style-template/how-to-use-this-template-1/modifying-code.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.