Modifying Code
How to navigate and modify the code
Last updated
Was this helpful?
How to navigate and modify the code
Last updated
Was this helpful?
The code is structured in app -> pages | components | models | services
There are broadly 20+ pages in this template. All pages are shown in the src/app folder above. Mostly, each page’s code is kept in a separate folder. Folder names are self-explanatory. You can create a page by executing the command
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: contains UI components for the page.
enappd.scss: contains sass styles to style your page.
enappd.ts: contains TypeScript code
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
Style pages are generated by default for each page after executing page generate command, inside the page folder.
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.
Navigation for the Tabs is defined in tabs/tabs.router.module file. All the children of tabs are inside the tab navigation as well
Controls the navigation of Segments (2 Segment buttons in the Offers page). This is detailed in src/app/offersfolder. All the settings of Segment Navigation can be controlled from here.
