# Modifying Code

## **Screen / View’s Code Structure**

### **Overall Folder Structure**

![](/files/-MABkS3F8kmgbwRh-UqD)

There are broadly **15**+ 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 5, 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

## **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/-Lqu9LAA0Y7wsL4hf8GP)

## **Styling** 

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

![](/files/-Lqu9ek0yDgrnNuZVbau)

## **Navigation Code Structure**

On creating a project in Ionic4 a file named `app-routing.module.ts` gets generated by default where all the navigation codes get done.

![](/files/-Lqu9buDb1xkvv0KN5i6)

We use the path name of a particular page to navigate from one page to another.-

## **Tabbed navigation**

Navigation for the Tabs is defined in `tabs/tabs.router.module` file. All the children of tabs are inside the tab navigation as well

![](/files/-Lqu9UZQCoH7MKU55CE6)

## **Nested Segment navigation**

![](/files/-Lqu9NuRpB5BYFBv2kAP)

Controls the navigation of Segments (3 Segment buttons in the Home page). This is detailed in `src/app/tab1`folder. 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-4-netflix-clone-template/how-to-use-this-template/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.