IONIC Section 4 - 4.3 Description of Ionics components

Click here for more videos available on our youtube channel !

Hello everyone and welcome to this video. In the last video, we saw the basic application building block. Now, we can ask ourselves the question of how do we use these components? In a project where we imported this library of component Ionics, there are different ways to import it, as you will also discover in this course. So in a project in which we import this library, we have access to this core of Ionic. And we use them like normal HTML elements. It is now very important to understand that if you have never worked with web components, the term may or will be brand new. for you and you may not know how to use them. In fact, you just need to add them with their tags in your HTML code, where you want to use them, such as regular HTML elements. Here is an example, it would be the "ion" button, basically a button provided by Ionic that wraps a normal native HTML button and then adds some extra styling to it, which is also important. These web components are not only about pre-styled elements, they also add Javascript logic to them or at least they often can, then this button can be set here, it can be given attributes, just like you can set attributes on normal HTML elements. But of course, the attributes you can set here the properties you can set on this button also depends on the webcomponent you are using, because everything which you can configure here, like "fill" which defines the button style. These are settings you can configure and the official docs are where great for knowing the attributes and properties you can set on these web components. So we use it like a normal HTML element it supports attributes and properties and these elements can also emit events. It's also very interesting, in fact, you also issue client events that you can listen, for example, to a special ion change event for some drop-down menus, and we'll see some of these events throughout the course. Now, one button I mentioned is ultimately a combination of the 3 main engines of front-end web development. It contains HTML code and here, we have the normal HTML elements supported, and in the end, all web components consist of these HTML elements. It is basically a piece of pre-structured HTML code. However, we don't just have HTML, we also have CSS styling and here you see something special for value, for color, for what's different. This is a CSS variable that makes it easier to style this web component from the outside and apply a general theme. We'll dive deeper into the style and theme of the course. But as I mentioned, a web component is not just a combination of HTML and CSS, we also have a Javascript part that adds certain functionality to this component, which exposed settable properties, which controls which items of that type we can set. The color or fill mode of this button. So this is all controlled by Javascript and all of that is wrapped together and encapsulated in a Javascript object that you can add and we can add to the HTML in the DOM with this Ionics button selector. Now in our process, this also uses a technique called "Shadow" DOM and CSS variables, which helps encapsulate the styles of this component so that the styling applied to elements of this component do not spread to your application or to others. Additionally, Ionic Web components automatically load all the polyfills needed to make them work on older browsers by automatically filling in all required information. This video is coming to an end, so I'll see you in the next video.