Creating a Component

Creating a Component

Let's create our first custom component using the Angular CLI. We'll build a simple user profile component.

Generate with the CLI

# Full command:
ng generate component user-profile

# Shorthand:
ng g c user-profile

Files Created

src/app/user-profile/
├── user-profile.component.ts      ← Component class
├── user-profile.component.html    ← Template
├── user-profile.component.css     ← Styles
└── user-profile.component.spec.ts ← Test file

The CLI also automatically registers the component in app.module.ts.

The Generated Component

// user-profile.component.ts
import { Component, OnInit } from '@angular/core';

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

    constructor() { }

    ngOnInit(): void {
    }
}

Adding Properties and Methods

export class UserProfileComponent implements OnInit {
    name: string = 'Alice Johnson';
    email: string = 'alice@example.com';
    role: string = 'Developer';
    isOnline: boolean = true;
    skills: string[] = ['Angular', 'TypeScript', 'CSS'];

    constructor() { }

    ngOnInit(): void { }

    getStatusText(): string {
        return this.isOnline ? 'Online' : 'Offline';
    }

    toggleStatus(): void {
        this.isOnline = !this.isOnline;
    }
}

The Template

<!-- user-profile.component.html -->
<div class="profile-card">
    <div class="profile-header">
        <h2>{{ name }}</h2>
        <span class="status" [class.online]="isOnline">
            {{ getStatusText() }}
        </span>
    </div>
    <div class="profile-body">
        <p><strong>Email:</strong> {{ email }}</p>
        <p><strong>Role:</strong> {{ role }}</p>
        <div class="skills">
            <span class="skill-badge" *ngFor="let skill of skills">
                {{ skill }}
            </span>
        </div>
    </div>
    <button (click)="toggleStatus()">Toggle Status</button>
</div>

The Styles

/* user-profile.component.css */
.profile-card {
    max-width: 400px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

.profile-header {
    background: #2c3e50;
    color: white;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    background: #95a5a6;
}

.status.online {
    background: #27ae60;
}

.profile-body {
    padding: 24px;
}

.skill-badge {
    display: inline-block;
    background: #3498db;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    margin: 4px 4px 4px 0;
}

button {
    width: 100%;
    padding: 12px;
    background: #3498db;
    color: white;
    border: none;
    font-size: 14px;
    cursor: pointer;
}

button:hover {
    background: #2980b9;
}

Using the Component

<!-- app.component.html -->
<h1>My App</h1>
<app-user-profile></app-user-profile>

Key Takeaways

• ng g c component-name generates a full component with files and module registration
• The selector (e.g., app-user-profile) becomes the HTML tag to use
• Properties in the class are available in the template via {{ }}
• Methods can be called from the template for computed values
• Component styles are scoped — they won't affect other components