IONIC Section 5 - 5.5 How do Angular and Ionic work together ?

Click here for more videos available on our youtube channel !

Hello everyone, the @ionic/angular package is finally a package wrapping the suite of Ionic components. You can therefore consider them as a package containing all these Ionic components, these web components can be used anywhere, and encapsulating them in an Angular-specific module that is usable only in the Angular app. This is due to making the use of these components easier and more efficient. through Angular, especially when we later talk about things like alert controller, modal controller, so we've already looked at these controller type components. So in an Angular application we use this set "@Ionic/angular" which gives us the suite of Ionics components, but acts as a binding, as it facilitates the use of these components and kind of gives us a bridge to use them easily. Somehow, we will use Angular components. And the Ionic module here does that, it basically includes all of these web components and gives us this extra magic that will help us for example with these controllers. And to take a closer look, I will invite you to consult the Ionic GitHub which will allow us to know a little more about this. This is how it looks, you have various folders and files such as the folder dedicated to Angular then in the source subfolder and you can see how this "@ionic/angular" package is configured and you will see what it does here in this Ionic module for example, is it takes all of these core Ionic web components and it's going to declare them, as you can see in the "NgModule", simply because this just wraps web components inside Angular components, so that Angular doesn't complain about unknown elements being used in this template, because by default it only accepts Angular components and normal HTML code. In addition we have features extras as you will see throughout this course. This is the idea of the Ionic module and it is through this that an Angular project and Ionic are connected. So this is a normal Angular project on which we add Ionic with this module, with some additional configuration in "Angular.json", and therefore, we can start use the Ionic components and functionalities of our Angular application. Now, since this is an Angular application, if you open a terminal directly on your text editor, so make sure you are on the right path to your project before running the command, “ionic serve”. After waiting a few moments, we get this new page that appeared to us, and as you will have understood, this is our ongoing project. It is how we use Angular and Ionic or how we create an application and how the two frameworks or libraries work together. It's time to practice, here we will create a simple application so we can also see how we use Ionic components and how we will use them in future videos.