Angular Components

Name: Angular Components
Author: Michaela Ochnich

Learn the components' functions, how to use the component decorator, and how to display data in the component template

Preview the first lesson free — get full access to all 5 lessons.

Course: On-Demand

>Hi, this lesson will introduce what an Angular component is, and how to create one using the Angular CLI. Components are the foundation of the Angular framework. A component is a piece of the application, like a nav bar, or a side navigation bar. It could be a search field, or maybe a registration form. Components are the different pieces that build your application, providing both a view for the users to interact with, and a class to respond to events, and handle the data and logic. The class controls the component logic and behavior, and the template sets up how it's rendered on screen for the user. The component class and template are able to interact and share information using binding. Property binding allows the class to pass data to the template to display to the user. If the user changes any data in the view, event binding can be used to fire off an event that updates the data in the class. Metadata provides extra configuration information for the component class. Components are named with a property called a selector that's set in the metadata. The selector is used to tell Angular where in the application this component should be created and shown. Using the selector, you can embed components, and other component templates starting with this root component, which holds the whole Angular application. These embedded components have parent/child relationships that allow them to interact and pass data. A child component is embedded inside a parent component. So here, the root component is the parent, and then it has two child components, A and B. Component A here is the parent component to this component down here, the grandchild component. This component is a grandchild of the root component since it's the child of one of the root's child components. Now, to create a component, open up a Terminal window, and you want to make sure you're in the correct directory. You want to be in the root folder of your Angular application. So for me, that's the components folder here. Then the command to create a new component is ng generate component, and then the component name. Then you can see from the output printed that four new files were created, and the app.module file was modified. Inside the module file, you can see it automatically imports the component up here, and then declares it for use in the module down here. The CLI tool takes care of this step when generating the component. So if you're creating your component files manually, don't forget to declare them here, or the app will compile with errors. The component folder is here inside this main app folder, and there are four files that were created by the CLI. This first TypeScript file here is used for writing tests for the component. This second TypeScript file here is the one that's for the class. Here's the decorator that marks this class as a component, and the metadata to configure it. We'll cover this more in depth in the next lesson, but remember the name of the selector here. This is what you'll need to add this component to the app. If you open the component's HTML file, you can see that it starts with this paragraph tag here that states that the component's working. And then if you open the CSS file here, this one starts blank, but we can quickly write a rule to change the font color of that paragraph tag. Now, to display this component in the app, open up the app.component.html file, which is the template file for the root component. Here you can delete all of this starter template code. And then I'm just gonna quickly add an h1 tag that says my Angular Application. Then to add the new component, write a tag using the selector that was set for the component. In this case, it was app-hello-world. Now I'm gonna run the command's ng serve in the Terminal window to build the application. Now that the application's running, I'm gonna open it up in a browser window, and you can go to localhost:4200 to view the application. And here you can see the app is displaying that component that was created. That's all for this lesson, Introducing Angular Components. Check out the next lesson where we'll cover the decorator and metadata.

Beginner Provider : Michaela Ochnich 5 Lessons · 25m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

These lessons introduce Angular components and how they control the view of an Angular application. You’ll learn about the component decorator and how it’s used to configure the component. You’ll also learn how to display data in the component template. Finally, you’ll learn about the different types of data binding and the component lifecycle hooks.

What You'll Learn

Understand what an Angular component is and how it controls the view of an Angular application
Configure components using the component decorator
Display data in the component template
Apply the different types of data binding
Work with the component lifecycle hooks

Key Takeaways

Angular components control the view of an Angular application.
The component decorator is used to configure the component.
Templates are used to display data in the component.
Angular supports different types of data binding.
Components have lifecycle hooks that can be used during their lifecycle.

Frequently Asked Questions

What does this course cover?

It introduces Angular components and how they control the view of an Angular application, including the component decorator, displaying data in the component template, the different types of data binding, and the component lifecycle hooks.

What skills will I gain from this course?

You will gain skills in Angular (Web Framework), Angular Components, Angular UI, Component Libraries, HTML Components, and UI Components.

What topics are taught in the lessons?

The lessons cover what a component is, the component decorator, templates, binding, and the component lifecycle.

What are the learning objectives of this course?

The objectives are to learn about Angular components and their functions and to learn the different types of data binding.