Angular: Introduction to Components. And I am Farish Kashefinejad, the software development domain lead at Cloud Academy. And in this video, I'm going to discuss Angular components, which are a fundamental building block of the Angular application.

Beginning with a quick tour of the environment, on the left is the Cloud Academy Lab code editor with an existing Angular application open. There's an HTML file with a h1 heading and a paragraph. The content of these HTML elements match what is on the right, which is the Angular development server running. This HTML file is the template for the app component. Opening the app component, this component is created when the app is made through the Angular CLI. It is the default root component for this application. I will do an overview of the structure of the app component as other components will match the structure in most cases. The app component begins with an import statement that extracts the component module from Angular Core.

As the name implies, Angular Core provides the core functionality to any Angular application. Next is the component decorator. Angular uses TypeScript for its applications, which is where decorators originate from. I'm stating this to emphasize that decorators are not native to JavaScript. Decorators are special declarations that are attached to class declarations. This syntax marks a class as an Angular component and provides configuration metadata that determines how the component should be processed and used at runtime. In Angular, we begin the declaration of a decorator with the @ symbol and then followed by the word component. Now I mentioned that the decorator passes through metadata. The metadata is the three object properties that are inside of the object that is being passed as an argument through the component decorator. First is the selector.

The selector is the CSS selector for the component to be inserted into. In this case, it is called approot. The template URL is the link to the file that acts as a view template for the component. The HTML file shown earlier is the template for the app component which is currently being rendered on the right. Next is the style URLs which is to link to any or multiple style sheets for this component. After the decorator is the class statement that is being exported. Inside of the class statement, there's some boilerplate code that is out of scope for this video. So, the decorator above will be attached to this class and when Angular renders the component, it will use this decorator's information as part of that rendering process. Now this ends the component overview. I will create a main component that will be inserted into the app component using the Angular CLI.

In the command line, I will type ng generate component and then main for the component name. I will expand the folder view to demonstrate what happens when executing the command. The command line lists the files that were generated and the main folder now is in the folder view. Expanding the main folder, I will go to the main component. I want to know that the component's name is main.component.ts. There is a pattern to the name of these files. It is convention to name the component file with the component name first, followed by .component, followed by .extension. Whenever a component is generated, additional files following that same naming convention are also generated. Now looking inside the file, there's an auto-generated boilerplate where the code structure is similar to the app component. Focusing on the component decorator, the selector is called app-main, and this is a common pattern when generating a component that the selector name will begin with the word app followed by a dash, followed by the component name.

This can be changed. There is also two other properties, the template URL and the styles URLs. As mentioned earlier, these files were generated as part of the CLI command. I'm going to go to the main component template file and I will change what is in here to state the main component, to make it clear what this represents. Now I will open up the app component HTML file with the main component split screen to the right in the editor. Now looking at the main component, there's that selector, app-main. I need to use the selector in the app template file to insert the main component. Inside the HTML file, I will write app-main and after I hit 'Save', the main component is now rendered in the development server. And these components are reusable, so I can copy and paste that same component again. And now to the right, the main component appears twice. Now this completes creating a component with the CLI. Now I will create a component manually.

For this demonstration, I will create a footer component and insert it after the main component. I will write out a comment to note this. When I used the CLI, it created a main folder. I will now create a footer folder, and inside of that folder, I will create footer.component.ts. Next, I will write out the boilerplate, and it's almost the same, I will first import component from Angular Core, and then starting with the @ symbol, I will create the decorator. Now for the selector, inside of the decorator, I will type app-footer. For the template URL, I will type ./footer.component.html. There will be no styles URL nor is it required when making a component. Now after the decorator, I will type export class footer component. So, the advantage to not creating the component with the CLI is you only create the files you need and you do not have any unnecessary boilerplate. This completes the footer component.

Now I need to make the template file. I will create a new file, footer.component.html. Inside of the file, I will create a paragraph with the text, the footer component. So, this is almost ready to insert into the app component. But before doing so, I need to tell Angular about this component. I'm going to go into a file called app.module.ts. This file is for the application startup and tells Angular what modules and components are being used for this application. Now, inside of this file, there are a couple of import statements for the components. The import statement for the main component was added when I created the component with the CLI. So, for this step, I need to type out the same for the footer component. Import footer component from the footer folder. Now underneath, there is this ng model declaration, which is a decorator. I need to add the footer component there.

Note the main component is already in there and that also occurred when it was created with the CLI. Now that this is completed, I can add the footer component to the app component. Going back to the app component template file, underneath the comment, I will type app-footer. After I hit 'Save', to the right, the footer component appears underneath the main component. So, in the end, either way of making a component will work, whether manually or through the CLI. Here are the recommended resources for this video. And that's it. Thanks for watching at Cloud Academy.

Angular - Introduction to Components

About