IONIC Section 4 - 4.1 Creation of our first Component

Click here for more videos available on our youtube channel !

Now that we have had an overview of how our project works, we will see together how to create a Component. So we are going to add a new file in the application folder and inside we are going to create a subfolder so I'm going to go directly to the source folder, in the "app" subfolder and I'm going to create the folder and the name "user", but you can choose something else of course, same, for the file, I will call it "user", however, it must contain the same convention i.e. "user.component.ts" and we export a class "export class" in which you usually name the component "user" here I put it in pascal box. Now we add the @component decorator to tell Angular that this class should be treated as a Component. And here my IDE added the import automatically but you must make sure that it is well informed each time you create this type of file. Each file works independently and depends on each dependencies of this file. Thus, each object or class, that you use from another file must be imported into this file. Now we definitely need a selector here, therefore our own tag allowing to use it. Now you are relatively free as far as naming is concerned, but that name will need to have a dash in it so you have something or other, so you don't conflict with the default names, like h1. I'll name it "app-user" to follow the convention with "app-" prefixed then the component name. Now I will too add a URL template to link the corresponding HTML file but this file does not exist yet, we will create it, make sure to give the right path for the IDE to find our HTML file in our tree structure. So we create the file, so I'm going to name it "user.component.html", here is the file, inside we will put a "p" tag to add a paragraph, and I will just put "A few users" and save. Now in the “app.module.ts” file, here it is and we will add an import where we going to import the "user" component right below so I'm going to copy and paste and I'm going to put user like this and you have to make sure that the name you use here corresponds to your class name that you created here in this file and it must be a relative path that is in the "user" subfolder and in the "user" component without the ".ts" extension and then it interacts well on both files. We now add it to the declarations because we need to declare all the components we use in this module. The question is where will Angular look for the selector in this component then? And the answer basically lies in all other components of this statement. But before I have to modify my file, I replace the parentheses at "UserComponent" with brackets, and also replace the double quotes with single ones to read the import well, and I delete the one that is of no use to us. So, we can go to the app. Now we will test our component that we created, in our "app.component.html" file, by inserting "app-user". You will see that if you go back to your browser, and you can see on our page the content of our page regarding our component that we have created. That's about our video, I'll tell you soon for the next one.