IONIC Section 5 - 5.6 Adding and Loading a New Page

Click here for more videos available on our youtube channel !

Hello everyone, after seeing how Angular and Ionic work together, now is the time to practice a bit. My advice is to keep a terminal open just below, it will automatically watch your code for changes that it will rebuild and reload the application when there are changes made. And you can enter a second window in which we will be able to use the Angular CGI to generate components with "ng generate components" you can also enter the shortcut "ng g c" you can generate a new components in your application. So now, we're going to design a cookbook implementation that will remain quite simple, so basically having a list of recipes and if we type one we can show the details of that recipe so i will add a new component which we will call "recipes" which will load as page("ng g c recipes". Of course, Angular pages are just components, but we can use the Ionic CLI to generate it, and if we enter the command “ionic generate”, you can choose from different proposals that you can create. And we are going to select “page”, and this is when we can give a name to our page, and therefore “recipes” which we execute. Once the loading is complete, we can observe the addition of a new folder in our project that corresponds with the name of the page we have chosen. In this folder we therefore find several files of type TS, SCSS, HTML for example. Now, if we go back to our "app-routing.module.ts" file, we will delete the "home" component with which we will also delete this path and the routing configuration for that we only have the root path where we now want to redirect our recipes, and then the path of our recipes where we have our loadout. And in the “recipes.module.ts” file, we simply rendered the recipe page. This file is a component that we can use as an Angular component in our HTML page, in which we find our header with "ion-header", then we will add a paragraph “The recipe page works!” between our “ion-content” tags. So this page is well loaded thanks to our “app-routing.module.ts” file. And so we're going to take a look at our page, but before that I'm going to go to the "app-routing.module.ts" file and I'm going to change the redirect to "recipes". And here is our page is perfectly connected, and that will be all about this video.