Angular Component | Overview and steps to Create a component

Angular Component are the basic building block for Angular applications. Each component consists of: An HTML template that declares what renders on the page. A Typescript class that defines behaviour.

Requirements

To create an angular component, verify that you have met the following requirement:

1. Install the Angular CLI.
2. Create an Angular workspace with initial application. If you don’t have a project, you can create one using ng new <project-name>, where <project-name> is the name of your Angular application.

Creating an angular component

Using Angular CLI is the simplest way to create a component. Manual steps can also be used to construct a component.

Creating an angular component using the Angular CLI

How to create a component using the Angular CLI:

1. Open terminal window, go to the directory containing your application.
2. Run the  following command
   ng generate component <my-new-component> 
here <my-new-component> is the name of our new component.

This command creates the following files by default:

• A folder named on the component name
• A component TS class file, <my-new-component>.component.ts
• A HTML template file, <my-new-component>.component.html
• A CSS file for styling, <my-new-component>.component.css
• A testing specification file, <my-new-component-name>.component.spec.ts

Where <my-new-component> is the name of your component.

How to create a angular component manually

As we know Angular CLI is the most convenient method to create an Angular component, but we can also do this process manually. This section explains how to create the core component file.

Steps to create a new component manually:

1. Go into the “src” directory in your Angular project .
2. Create a new folder named as your component. Example my-new-component
3. Create a new file, <my-new-component>.component.ts.
4. At the top of the file, add the following import statement.

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

5. After the import statement, add a @Component decorator

@Component({

})

6. Create a CSS selector for the component.

@Component({
  selector: 'my-new-component',
})

7. Define the HTML template for the component to display information. In most cases, this template is a separate HTML file.

@Component({
  selector: 'my-new-component',
  templateUrl: './my-new-component.component.html',
})

8. Select the styles for the component’s template. In most cases, you define the styles for your component’s template in a separate file.

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

9. Add a class statement that includes the code for the component.

export class MyNewComponentComponent {

}

What is component’s CSS selector and how to specify it

A CSS selector is required for each component. A selector tells Angular to create this component whenever the appropriate tag in the template HTML is found. Consider the component my-new-component.component.ts, which has app-hello-world as its selector. This selector tells Angular to create this component whenever the tag is used in a template.

Add a component’s selector to the @Component decorator using selector statement.

@Component({
  selector: 'my-new-component',
})

Working with the template of a component

A template is a piece of HTML that instructs Angular on how to render a component in your app. A template for your component can be defined in one of two ways: by referencing an external file or directly within the component.

Add a templateUrl property to the @Component decorator to define a template as an external file.

@Component({
  selector: 'my-new-component',
  templateUrl: './my-new-component.component.html',
})

If you want to use template within the component. Then Add a template property instead of templateUrl to the @Component decorator that holds the HTML you want to use .

@Component({
  selector: 'my-new-component',
  template: '<h1>Hello World!</h1>',
})

Use backticks ( ` ) if you want your template to span several lines. As given following code:

@Component({
  selector: 'my-new-component',
  template: `
    <h1>Hello World!</h1>
    <p>This template definition spans several lines.</p>
  `
})

An Angular component requires a template defined using template or templateUrl. You cannot have both statements in a component.

How to declare a component’s styles

You can declare a component’s template styles in one of two ways: by referencing an external file or by declaring them directly in the component.

Add a styleUrls property to the @Component decorator to declare a component’s styles in a separate file.

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

Add a styles property to the @Component decorator that holds the styles you want to use to declare the styles within the component.

@Component({
  selector: 'my-new-component',
  template: '<h1>Hello World!</h1>',
  styles: ['h1 { font-weight: normal; }']
})

An array of strings containing CSS rule declarations is passed to the styles property.

Conclusion

In this article we have learned about angular components and its configurations. And checked out various ways to create an angular component.