Create Component Without CLI - Manual Component Creation

Angular Component Without CLI (Manual Way)

Angular has a CLI command to create components, but creating a component manually helps you understand how a component really works.

Why Create Component Without CLI

When you write code yourself, your practice improves.

More practice makes you a better developer.

You learn what files and things are actually required for a component.

Create Footer Component

Create a folder named footer.

Create a component file inside it and export the class so it can be used elsewhere.

Component Decorator

Use @Component to define a component.

selector is the name used like an HTML tag.

app-footer is used to show the footer component.

Inline Component

HTML and CSS can be written inside the same file.

This is called an inline component.

Separate HTML and CSS

You can move HTML to footer.html.

Use templateUrl instead of template.

Move CSS to a separate file and use styleUrl.

Using Signal in Component

Create a signal like name.

Display it in HTML using {{name()}}.

Use Component in App

Use the selector in app.html.

Register Component

Import the Footer component in app.ts.

Add it inside the imports array.