How to create a new component in Angular?

A component in Angular is the building block for making web pages. It is a reusable block of code that can be used anywhere in the app any number of times. It provides scalability, reusability, and readability. Each component does a specific job like showing a menu, a photo or a card, etc.

In this article, we will see how to create a new component in Angular.

Steps to create a new component in Angular:

Step 1: Download and install NodeJS from its official website, npm is included with that.

Step 2: To install angular CLI run the following command in the terminal.

npm install -g @angular/cli

Step 3: After installing angular cli, set up a new project in angular using the below command:

ng new my-angular-app

Folder structure:

Dependencies:

"dependencies": {
    "@angular/animations": "^17.1.0",
    "@angular/common": "^17.1.0",
    "@angular/compiler": "^17.1.0",
    "@angular/core": "^17.1.0",
    "@angular/forms": "^17.1.0",
    "@angular/platform-browser": "^17.1.0",
    "@angular/platform-browser-dynamic": "^17.1.0",
    "@angular/router": "^17.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
}

Step 3: Navigate to the project using cd your-project-name and open the terminal and write the command mentioned below to generate a new component in angular:

ng generate component component-name

"OR"

You can use this shortcut

ng g c component-name

Note: After this command, it will ask you for styling so chose as per your needs( css for now) then it will ask for SSR, press n to skip it then the component will be generated in src folder of the project.

The component will look like this:

Example to create a New Component in Angular

Code: Now add the following code in the required files.

<!-- Html Structure of component-->

<div class="card">
    <div class="card-header">
        <h2 class="heading">GeeksforGeeks</h2>
    </div>
    <div class="card-body">
        <img src="../../assets/img/gfg logo.png" alt="GeeksforGeeks Image" />
        <p>
            GeeksforGeeks is a leading platform that provides computer science
            resources and coding challenges for programmers and technology
            enthusiasts, along with interview and exam preparations for upcoming
            aspirants. With a strong emphasis on enhancing coding skills and
            knowledge, it has become a trusted destination for over 12 million 
            plus registered users worldwide. The platform offers a vast 
            collection of tutorials, practice problems, interview tutorials,
            articles, and courses, covering various domains of computer science.
        </p>
    </div>
</div>

// app.compoenent.html

<app-card></app-card>

/* my-component.component.css */
body {
    font-family: 'Roboto', sans-serif;
}

.heading {
    text-align: center;
    color: #ffff;
}

.card {
    width: 20%;
    height: auto;
    margin: auto;
    margin-top: 10vh;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(to bottom right, #4e54c8, #8f94fb);
}

.card-header {
    background: linear-gradient(to top left, #00a300, #00c900);
    padding: 10px;
}

.card-body {
    padding: 20px;
}

.card img {
    max-width: 60%;
    height: auto;
    margin-bottom: 20px;
    border-radius: 20px;
    display: flex;
    margin: auto;
}

.card-body p {
    color: #ffff;
    margin-top: 20%;


}

@media screen and (max-width: 768px) {
    .card {
        width: 90%;
        height: auto;
    }
}

// app.component.ts

import { Component, NgModule } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CardComponent } from './my-component/my-component.component';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet,
        my - component],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'card';
}

// my-component.component.ts

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

@Component({
    selector: 'my-component',
    standalone: true,
    imports: [],
    templateUrl: './my-component.component.html',
    styleUrl: './my-component.component.css'
})
export class my-component {

}

Run the project using command given below:

ng serve

Output: