IONIC Section 5 - 5.16 Angular components vs Ionic components

Click here for more videos available on our youtube channel !

Hello everyone, now that we have added our alert controller, we are almost there. One of the things I want to show you, just to understand how it works. Obviously in this Angular project you can still create your normal Angular components that you use with their selectors in your templates, so you can't just generate pages with Angular components, you can still use them like you use them in any Angular project. So we can use "ionic generate" again and as you will see, in addition to being able to create a page, we can now create a component, so let's go, we can write "recipes/recipe-item". Now we will enter the ion-item code in our "recipes.page.html" file and add it in our new component, and more precisely in our "recipe-item.component.html" file. What you must remember, is that it will not render as an Ionic page. We don't want to have "ngFor" on this item so we'll delete it, but rather in our "recipe-item.component.ts", we want a property that we will insert in our export "@Input() recipeItem: Recipe;" importing it with “import { Recipe } from '../recipes.model';”. So it will be a recipe of type and so you have to import a recipe from the recipe template file and it could be externally linked. How does it work in Angular? You add well “@Input()” not forgetting to import it with “@angular/core”. So you can continue building those normal Angular components with inputs, outputs, etc. Here we Let's use an input and make a recipe item externally bindable. Therefore, in our HTML file, we can use in the "routerlink", "recipeItem.id" also in our image and our label. So, now, in our “recipes.module.ts” file, we will refer our new component by declaring it “RecipeItemComponent” and in our “recipes.page.html” file we can use “app-recipe-item” i.e. the selector of the created component and all we have to do is pass a value by browsing our recipes with "*ngFor="let recipe of recipes"" and then "[recipeItem]="recipe"". And if we save all that, our app should now rebuild and now work as before. Here we always have our articles and we can always consult them. So it works as before and I show it to you simply because I really want to make sure you understand that this is a normal Angular project and that you can build Angular components as you are used to. And indeed, if you compare Angular components and Ionic components, you will see that you use them in the same way in your Angular project. Of course, Angular components are created by you with @component or you import a library and in fact @ionic/angular this package wraps at the end all the components of the Ionic band in Angular components. So technically, it still has Angular components now, in its core it still has web components. So we create our own components with @component, we use them in our Angular templates and that's the only place we can use them. Angular will render them to the DOM for us which will render their models to the DOM. However, we can only use Angular components in an Angular app. The predefined Ionic components are open-source but you cannot edit them, they will not allow you to merge your changes into the repository Ionic for no reason. Ionic components use native web technologies. These are web components. Yes, they are surrounded here by @ionic/angular, but in its core, there are always webcomponents and so you can use these webcomponents anywhere, in any project, not just inside Angular applications. I hope it's clear enough for you now, this video is coming to an end, I'll give you an appointment for the next one.