Programmingempire

In this post on Creating Some Angular Components, I will show you how to create components in Angular using a few examples.

Basically, an Angular application is built with components where each component is a self-contained unit that we can manage independently. That is why we can modify and replace a component without affecting other parts of the application.

Features of Angular Components

1. Components are the basic building blocks of a Single Page Application (SPA).
2. They represent a specific part of the screen that is referredtoas a view.
3. It is possible to modify or even delete a particular component without affecting any other component.
4. In fact, we perform data-binding in a component that helps us enabling user-interaction in an Angular application.

Different Parts of a Component

Now that, we have a basic understanding of Angular components, let us see how a component is built. In fact, a component has three parts.

1. Firstly, A TypeScript file that contains the definition of the component class.
2. Secondly, the component has a template file. Indeed, the template is nothing but an HTML file where we can put the HTML elements.
3. Lastly, the component has a CSS file for the styling purpose.

To illustrate, we create an Angular project and add two components.

Angular CLI Command to Create Components

Basically, we use the following commands to create components. Meanwhile, the commands to create and compile Single Page Application are described in this article.

ng generate component <component-name>

Therefore, we need to run the following commands.

ng generate component header1
ng generate component main-content

Example Application for Creating Some Angular Components

Take the case of a web application that we create using Angular 10. To demonstrate the concept of components, we create two components in our application namely the header1 and main-content. While the component header1 displays only some text, the second component called main-content displays a small form.

header1.component.ts

As evident from the following code, the @Component decorator indicates that the class immediately followed by it is in fact a component class. Hence, Header1Component is a component class.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header1',
  templateUrl: './header1.component.html',
  styleUrls: ['./header1.component.css']
})
export class Header1Component implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

main-content.component.ts

Likewise, MainContentComponent is also a components class for our second component.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-main-content',
  templateUrl: './main-content.component.html',
  styleUrls: ['./main-content.component.css']
})
export class MainContentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

header1.component.html

After that, we open the html file for our first component and specify the HTML elements in it. Further, we need to specify the styling information for this HTML file.

<div class="container">
  <div class="row">
      <div class="col-md-12 con">
            <h1>Welcome to Angular Projects!</h1>
            <h2>Learn and Develop Angular Projects</h2>
        </div>
  </div>
</div>

header1.component.css

Hence, open the corresponding CSS file and write the following CSS elements.

.con{
  background-color: #c0c0c0;
  height: 200px;
}
h1{
  color: #005a9c;
  text-align: center;
  padding-top: 10px;
  font-size: 4rem;
}
h2
{
  color: #005a9c;
  text-align: center;
  font-size: 2rem;
}

html {
    font-size: 62.5%;
    box-sizing: border-box;
  }
body{
}

main-content.component.html

Now that, the code for the first component is complete, we proceed further with our second component. Therefore, open the corresponding HTML file for the second component and write the following HTML in it.

<div class="col-md-12 c2">
  <h1> This is Main Content</h1>
  <hr/>
  <div class="con">
    <table class="table">
      <tr>
    <td><label for="Number Manipulation">Enter a Number:  </label></td>
    <td><input type="text" value="0"/><br/></td>
    </tr>
    <tr>
    <td><label for="Number Manipulation">Enter another Number:  </label></td>
    <td><input type="text" value="0"/><br/></td>
    <tr>
      <td clspan="2">
        <button>Do Something</button>
        </td>
    </tr>
    </table>
  </div>
</div>

main-content.component.css

Additionally, provide the necessary styling information for the second component in the corresponding CSS file.

.c2{
  background-color: #c2c2c2;
  width: 100%;
  height: 400px;
}

h1{
  color: #2f4f4f;
  text-align: center;
  font-size: 3rem;
  margin-top: 10px;
}

.con{
text-align: center;

}

To demonstrate, the components, we run our application and we get the following output.

Output

Summary

In this article on Creating Some Angular Components, you have learned about the components in Angular. To conclude the discussion on components, we can say that the components are the building blocks of an Angular application. In fact, components provide several benefits to an application and the most important one is reusability. Meanwhile, the application built using components is highly maintainable as you will experience when you develop more.

---

Further Reading

Creating Single Page Applications with Angular

Angular 10 Data Binding in Different Ways

Creating Some Angular Components

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET