Steps to Create App, Example with Output

Step 1: Create a new Angular app:

ng new my-angular-app

Step 2: Move to the Project Directory:

cd my-angular-app

Step 3: Generate a new component:

ng generate component my-component

Project Structure:

Step 4: Edit the component files:

Edit the generated component files (`my-component.component.html`, `my-component.component.css`, `my-component.component.ts`) to define the template, styles, and behavior of the component.

HTML

<!-- app.component.html -->
<app-my-component></app-my-component>

HTML

< !-- my - component.component.html-- >
    <div>
        <h1>Welcome to My Component!</h1>
        <p>{{ message }}</p>
        <button (click)="changeMessage()">Change Message</button>
</div >

JavaScript

//component.component.ts

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

@Component({
    selector: 'app-my-component',
    standalone: true,
    imports: [],
    templateUrl: './my-component.component.html',
    styleUrl: './my-component.component.css'
})
export class MyComponentComponent {
    message: string = 'Initial message';

    changeMessage() {
        this.message = 'New message';
    }
}

Step 5: Run your Application:

ng serve

Output:

When you run your Angular app (`ng serve`), you’ll see the message “Welcome to My Comonent!” displayed on the screen. Clicking the “Change Message” button will update the message to “New message” dynamically.

Angular Components Overview

Angular Components are the building blocks of Angular applications, containing the template, styles, and behavior of a part of the user interface. This article provides an overview of Angular components, including their structure, features, and how to create and use them effectively.

Table of Content

Introduction to Components
Component Structure
Component Lifecycle
Data Binding:
Input and Output Properties:
Component communication
Features:
FAQs

Steps to Create App, Example with Output

Output:

Angular Components Overview

Similar Reads