Introduction to Angular Components and How to Implement It?

There are several analogies to define components, but consider them as lego blocks used to create a final well-structured product. In simple terms, Angular Components are the building blocks of an application. They define different aspects of the user interface. This article on Angular Components will cover the following topics: 

  • What Are Angular Components?
  • Creating Your First Angular Component
  • Component Decorator Metadata
  • Demo 
Learn the concepts such as TypeScript, Bootstrap Grid System, dependency injections, SPA, forms, pipes, promises, observables, and Angular class testing with the Angular Certification Training Course.

What Are Angular Components?

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. 

Components_Heirarchy-Angular_Components

The above image gives the tree structure of classification. There’s a root component, which is the AppComponent, that then 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 in order for it to be usable by another component or application. 
  • Components control their runtime behavior by implementing Life-Cycle hooks. 

Component_Decorator-Angular_Components

The above image shows an App component, which is 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, <app-root> tag corresponds to component’s selector. By doing so, Angular will inject the corresponding template of the component. 

Angular_AppComponent

Full Stack Web Developer Course

To become an expert in MEAN StackView Course
Full Stack Web Developer Course

Creating Your First Angular Component

  • To create an Angular Component, Angular CLI is used. In the terminal, type in the command, 

  ng g c component-name

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

Create_component

You’ll also receive a message: 

Component_Message

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

It is crucial for Angular to know which component is to be run next and its features. For that, some metadata is created. The next 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: [`

    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 own 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 be used to define some markup. The markup could typically include some headings or paragraphs that are 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

Demo: Creating an Angular Component

Now that you have a good understanding of Angular components let me help you create an application using them. 

Step 1: First, create a folder in your application to store all your components in. 

ng g c components/new-component

Observe that the extension .component is appended to indicate that it is indeed a component.

Step2: Within the component, open the new-component.component.html file to type in whatever you’d like to see on the browser. 

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

Step3: 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']

})

In the app.component.html, which is the root component, go ahead and define the custom HTML tag. This indicates that the component created is being incorporated for 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 something like this. 

Angular_Component

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

Here, I’ve created another component within which I’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, 

Component_Angular

Enroll for the Angular Certification Training Course and gain in-depth knowledge of concepts like TypeScript, Bootstrap Grid System, and more!

Next Steps

This article on Angular Components helped you get a brief insight into the concept of Components. But to learn more about Angular in its entirety, certification is highly recommended and could act as a catalyst for your coding career. Simplilearn's Angular Certification Training Course will help you master front-end web development with Angular. You will gain in-depth knowledge of concepts like facilitating the development of single-page web applications, dependency injection, typescript, components, and directives with this Angular Course. You will also have the opportunity to apply your skills by building a real-time application.

If you have any questions or feedback, let us know in the comments section of the What is Angular article. Our experts will get back to you immediately.

About the Author

Chinmayee DeshpandeChinmayee 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 accordingly.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.