12/27/24, 11:49 PM Introduction to Angular Components and How to Implement Them?

All Courses

Software Development

Tutorials Articles Ebooks Free Practice Tests On-demand Webinars

Home Resources Software Development Angular Tutorial for Beginners Introduction to Angular
Components and How to Implement Them?

https://www.simplilearn.com/tutorials/angular-tutorial/angular-components 1/12
12/27/24, 11:49 PM Introduction to Angular Components and How to Implement Them?

Introduction to Angular Components and How to Implement Them?

Lesson 6 of 13 By Chinmayee Deshpande

Last updated on Sep 3, 2024 104947

Previous Next

Tutorial Playlist

Table of Contents

What are Angular Components?

Creating Your First Angular Component

Component Decorator Metadata

Demo: Creating an Angular Component

Next Steps

View More

Unlock the power of Angular by mastering its building blocks-Angular components! This tutorial
will take you through the core of Angular development, starting with an introduction to Angular
components. You'll discover how these dynamic, reusable pieces of code bring your applications
to life. By the end, you'll understand the fundamentals and learn how to implement them like a
pro, making your Angular apps more efficient and scalable.

https://www.simplilearn.com/tutorials/angular-tutorial/angular-components 2/12
12/27/24, 11:49 PM Introduction to Angular Components and How to Implement Them?

Advance Your MERN Stack Career in 6 Months!

Full Stack Developer - MERN Stack

EXPLORE COURSE

What are Angular Components?

Angular components are the building blocks of a UI in an Angular application. These components
are associated with a template and are a subset of directives.

The above image shows the classification tree structure. A root component, the AppComponent,
branches out into other components, creating a hierarchy.

Here are some of the features of Angular Component:

Components are typically custom HTML elements, and each of these elements can instantiate
only one component.

A TypeScript class is used to create a component. This class is then decorated with the
“@Component” decorator.

The decorator accepts a metadata object that gives information about the component.

A component must belong to the NgModule for it to be usable by another component or

application.

Components control their runtime behavior by implementing Life-Cycle hooks.

https://www.simplilearn.com/tutorials/angular-tutorial/angular-components 3/12
12/27/24, 11:49 PM Introduction to Angular Components and How to Implement Them?

The above image shows an AppComponent, a pure TypeScript class decorated with the
“@Component” decorator. The metadata object provides properties like selector, templateUrl, and
so on—the templateUrL points to an HTML file that defines what you see on your application.

In the index.html file, the <app-root> tag corresponds to the component’s selector. By doing so,
Angular will inject the corresponding template for the element.

Unleash Your Career as a Full Stack Developer!

Full Stack Developer - MERN Stack

EXPLORE COURSE

https://www.simplilearn.com/tutorials/angular-tutorial/angular-components 4/12
12/27/24, 11:49 PM Introduction to Angular Components and How to Implement Them?

Creating Your First Angular Component

Angular CLI is used to create an Angular component. In the terminal, type in the command,

ng g c component-name

This will create a folder named component-name with four files.

You’ll also receive a message:

The update message indicates that the component created is included in the declarations array
of the main component.

Angular needs to know which component to run next and its features. For that, some metadata is
created. The following section addresses the component metadata.

Component Decorator Metadata

As mentioned earlier, the @Component decorator accepts a metadata object that provides
information about the component. Here’s a list of properties of the metadata object:

@Component({
selector: 'app-root',
template: `<h1>Hello! Welcome</h1>`,
templateUrl: './app.component.html',
styles: [`
https://www.simplilearn.com/tutorials/angular-tutorial/angular-components 5/12
12/27/24, 11:49 PM Introduction to Angular Components and How to Implement Them?

h3{
color: blue;
}
`],
styleUrls: ['./app.component.css']

Selector

It is the CSS selector that identifies this component in a template. This corresponds to the HTML
tag that is included in the parent component. You can create your HTML tag. However, the same
has to be included in the parent component.

Template

It is an inline-defined template for the view. The template can define some markup, typically
including headings or paragraphs displayed on the UI.

templateUrl

It is the URL for the external file containing the template for the view.

Styles

These are inline-defined styles to be applied to the component’s view.

styleUrls

List of URLs to stylesheets to be applied to the component’s view.

Providers

It is an array where certain services can be registered for the component.

Animations

Animations can be listed for the components.

Accelerate your career as a skilled MERN Stack Developer by enrolling in a unique Full Stack
Developer - MERN Stack Master's program Get complete development and testing
https://www.simplilearn.com/tutorials/angular-tutorial/angular-components 6/12
12/27/24, 11:49 PM Introduction to Angular Components and How to Implement Them?
Developer MERN Stack Master s program. Get complete development and testing
knowledge on the latest technologies by opting for the MERN Stack Developer Course.
Contact us TODAY!

Demo: Creating an Angular Component

Step 1: Create a folder in your application to store all your components.

ng g c components/new-component

Please observe that the extension .component is appended to indicate it is a component.

Step 2: Open the new-component.component.html file within the component to type in whatever
you’d like to see on the browser.

<h1>Hey! I'm the first component</h1>

Step 3: In the new-component.component.ts file, copy the selector property to incorporate it in

the app.component.html file.

@Component({
selector: 'app-new-component',
templateUrl: './new-component.component.html',
styleUrls: ['./new-component.component.css']
})

Define the custom HTML tag in the app.component.html, the root component. This indicates that
the created component is being incorporated into the final render.

<h1>Welcome to this tutorial on Angular Components</h1>

<app-new-component></app-new-component>
You can also define any styling conventions for the component in the CSS file.
h1 {
text-align: center;
}

Once you execute the ng serve command, the output looks like this.

https://www.simplilearn.com/tutorials/angular-tutorial/angular-components 7/12
12/27/24, 11:49 PM Introduction to Angular Components and How to Implement Them?

You can create multiple components and define the tags in the app component. The components
are executed sequentially.

We have created another component within which we’ve embedded the Simplilearn logo.

<h1>This is the image component</h1>

<img src= "assets/Angular_logo.png" class="center">
I’ve also specified styling conventions in its corresponding CSS file.
h1 {
color: green;
text-align: center;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

The final output looks like this,

https://www.simplilearn.com/tutorials/angular-tutorial/angular-components 8/12
12/27/24, 11:49 PM Introduction to Angular Components and How to Implement Them?

Get the Coding Skills You Need to Succeed

Full Stack Developer - MERN Stack

EXPLORE PROGRAM

Next Steps

This tutorial briefly introduced Angular components, giving you a glimpse into their role in front-
end development. To fully master Angular and elevate your coding career, pursuing a certification
is highly recommended. Simplilearn's Full Stack Developer - MERN Stack program is designed to
make you an expert in front-end web development with Angular. You'll dive deep into essential
concepts such as single-page application development, dependency injection, TypeScript,
components, and directives. Through hands-on projects, including building a real-time
application, you'll gain practical experience to solidify your skills.

FAQs

1. What is the difference between Angular service and component?

An Angular component is responsible for the application's user interface and behavior, including
displaying data and handling user input. In contrast, an Angular service is a class that shares
data and functionality across different components. Services are typically used for tasks like
fetching data from an API, business logic, or shared utilities, while components handle the
presentation and user interaction.

2. What are Angular modules and components?

An Angular module is a container for a group of related components, services, directives, and
pipes that form a functional unit within the application. Modules help organize an application into
cohesive blocks of functionality. On the other hand, an Angular component is a building block of
the UI, consisting of a TypeScript class, an HTML template, and optional CSS styles. It is
responsible for rendering a view and handling user interaction.
https://www.simplilearn.com/tutorials/angular-tutorial/angular-components 9/12
12/27/24, 11:49 PM Introduction to Angular Components and How to Implement Them?
espo s b e o e de ga e a d a d g use te act o .

3. How to add a component in Angular?

To add an Angular component, use the Angular CLI command: ng generate component
<component-name> or ng g c <component-name>. This command creates a new directory with
the component’s TypeScript, HTML, and CSS files. Once created, you must declare the
component in the appropriate Angular module's @NgModule decorator under the declarations
array to use it in your application.

4. What is lazy loading in Angular?

Lazy loading in Angular is a technique that loads modules only when needed rather than at the
start of the application. This improves performance by reducing the initial load time. To
implement lazy loading, define routes with loadChildren in the routing module, pointing to the
module you want to load lazily. This ensures the module is loaded only when the user navigates
to the corresponding route.

Find our Full Stack Java Developer Masters Program Online Bootcamp in top cities:

Name Date Place

Full Stack Java Developer Cohort starts on 8th Jan 2025,

Your City
Masters Program Weekend batch

About the Author

Chinmayee Deshpande

Chinmayee is a Research Analyst and a passionate writer. Being a technology enthusiast, her
thorough knowledge about the subject helps her develop structured content and deliver accor…

View More

https://www.simplilearn.com/tutorials/angular-tutorial/angular-components 10/12
12/27/24, 11:49 PM Introduction to Angular Components and How to Implement Them?

Recommended Programs

Full Stack Java Developer Masters Program Lifetime

Access*
886 Learners

Full Stack Developer - MERN Stack Masters Program Lifetime

Access*
669 Learners

Java Certification Training Lifetime

Access*
15089 Learners

*Lifetime access to high-quality, self-paced e-learning content.

Explore Category

Recommended Resources

Java Programming: The The Ultimate Guid

Complete Reference Yo… Front End and Bac

© 2009 -2024- Simplilearn Solutions.

https://www.simplilearn.com/tutorials/angular-tutorial/angular-components 11/12
12/27/24, 11:49 PM Introduction to Angular Components and How to Implement Them?

Acknowledgement
PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, OPM3 and the PMI ATP seal are the registered marks of the Project Management
Institute, Inc.

https://www.simplilearn.com/tutorials/angular-tutorial/angular-components 12/12