How to Create and Use Your Own Components in Angular 17 – No CLI

In this tutorial you will understand internals of working with components in angular 17 and learn to set up custom component manually without using Angular CLI. Step by step hands on lab to register custom components in app module and reuse it in another components.

What Are Angular Components?

Angular components are the building blocks of Angular applications. They are the fundamental UI elements that encapsulate the presentation logic and the user interface of an application. Each component consists of three main parts:

• Template:This is the HTML markup that defines the structure of the component’s view. It includes the elements and data bindings that determine how the component will be rendered in the browser.
• Class:The class contains the component’s logic and data. It’s typically written in TypeScript and contains properties and methods that define the behavior of the component.
• Metadata:Metadata is represented by a decorator that provides Angular with information about the component, such as its selector (name), template URL or inline template, style URLs or inline styles, and other configuration options.

Create Your First Angular Component and register it in App Module No CLI

When you create an Angular component, you’re essentially defining a reusable piece of UI functionality that can be composed and reused throughout your application.

First, ensure you have an Angular project set up. Since we’re not using the CLI, you’ll have to create the project structure manually or adjust an existing one.

If you are new to angular development refer our articles on angular project set up and getting started.

Angular project Setup Step by Step Practical Tutorial – Full Stack Tutorials Hub

How an Angular App gets Loaded and Started – Full Stack Tutorials Hub

Each component should reside in its own folder. The folder name should be kebab-case and match the component’s base name.

Create a new folder “employee” under app folder.

We’ll create a new component called EmployeeComponent. You need to create two files: the TypeScript file for the component logic, the HTML file for the template.

The class name of the component should be PascalCase and should typically match the filename. The class name should also end with the type of class it represents.

Each component should have its files named with a base name, followed by the type of file (component, module, service, etc.), and the file extension.

Create a new file with name employee.component.ts and add below code.

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

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html'
})
export class EmployeeComponent {
}

In Angular, each component is defined by its class file, but it’s also associated with a html template using templateUrl.

Two important parts of the component metadata that tie these elements together are the selector and the templateUrl. These are specified in the @Component decorator that you apply to the component class.

The @Component decorator is a function that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

In the context of an Angular class, imports are used to include necessary modules, components, directives, pipes, or services from Angular’s library or your own or third-party modules.

Angular Selectors

The selector is a string that specifies the custom HTML tag where the component will be instantiated and used within an Angular template. It acts much like a CSS selector but for marking where Angular should insert the component’s output in the DOM structure of the application.

• Unique Identifiers:The selector should be unique across the application. It’s a good practice to prefix the selector with something specific to avoid conflicts with HTML elements and other components. For example, Angular CLI-generated projects often use an app- prefix.
• Naming Convention: Typically, the selector is kebab-case (e.g., app-employee for an EmployeeComponent).
• Usage: You use the selector in the HTML like any other HTML tag. For instance, if your component’s selector is app-employee, you would include <app-employee></app-employee>.

TemplateUrl

The templateUrl is a string that tells Angular where to find the HTML template for the component. The HTML template defines the part of the view that the component controls.

• File Path: The path provided in templateUrl is relative to the location of the component file itself.
• HTML Structure:This template file contains the HTML structure along with Angular-specific elements like bindings, directives, and pipes.

Exports in an Angular context are primarily used in Angular modules (NgModule). They are not used directly within Angular components. An Angular module uses exports to make its components, directives, and pipes available to other modules.

Create a new file with name employee.component.html and add below code.

<p>Employee Component Loaded </p>

An Angular module uses exports to make its components, directives, and pipes available to other modules.

When a class, like a component or service, is part of a module, it needs to be declared there, and if it should be accessible from outside the module, it should be exported through the module’s exports array.

Register the Component in AppModule

Once the component is created, you need to declare it in an Angular module. To declare a component in a module, you need to add it to the declarations array of the @NgModule decorator in that module.

Here, EmployeeComponent is added to the declarations array, which tells Angular that CustomComponent is part of the AppModule and should be compiled with the rest of the application’s components.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {EmployeeComponent} from './employee/employee.component';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

How to call one component in another component in angular

You can now use the <app-employee></app-employee> selector in your app.component.html or any other template to render the EmployeeComponent.

app.component.html

<main class="main">
  <div class="content">
    <app-employee></app-employee>
  </div>
</main>

This manual setup requires you to manage dependencies, TypeScript configuration, and bundling on your own.

How to create Components in Angular 17 using CLI command

To create a new component in an Angular application using the Angular CLI, you can use the following command.

ng generate component component-name

or the shorter version:

ng g c component-name

Replace component-name with the desired name for your component. This command will create a new folder named after your component within the app directory (or another directory if specified), containing four files by default.

• component-name.component.ts: The TypeScript file for the component’s logic.
• component-name.component.html: The HTML template for the component.
• component-name.component.css: The CSS stylesheet for the component.
• component-name.component.spec.ts: The testing file for the component.

The Angular CLI will also automatically declare the component in the nearest module (usually app.module.ts).

Create component & add it to a specific module with Angular-CLI

To create a new component in an Angular application and add it to a specific module using Angular CLI,Navigate to your Angular project directory.

Use the Angular CLI to generate a new component. You can specify the module with which you want to associate this component using the --module option. Replace module-name with the name of your module and component-name with the name of your component:

ng generate component component-name --module=module-name

Alternatively, you can use the shorthand version:

ng g c component-name --module=module-name

This command does several things:

• Creates a new directory for the component under the appropriate path based on the Angular project’s configuration.
• Adds the necessary component files including the TypeScript, HTML, CSS, and spec files.
• Automatically declares and exports the component in the specified module’s declarations array if it’s not already there.

After running the command, check the module file (e.g., module-name.module.ts). You should see your new component listed in the declarations array of the @NgModule decorator, indicating that the component is part of this module.

You can now use your new component in any template within the scope of the module where it has been declared. Just use its selector (usually defined in the component’s TypeScript file) in the HTML files.

FAQ: Working with Components in Angular 17