Angular Component & how to create component and Write Code | What is String Interpolation

 

What is an Angular Component?

An Angular Component is the main building block of an Angular application.

Think of a component as:

• HTML (UI) → what the user sees

• TypeScript (Logic) → how the data works

• CSS (Style) → how it looks

👉 Every screen, page, or section in Angular is a component.

Structure of an Angular Component

A component has 3 main parts:

1. Component Class (TypeScript)

2. Template (HTML)

3. Decorator (@Component)

Example:

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

@Component({

  selector: 'app-user',

  templateUrl: './user.component.html',

  styleUrls: ['./user.component.css']

})

export class UserComponent {

  name: string = 'Shiva';

  age: number = 25;

}

Explanation

Part	Meaning
@Component	Tells Angular this is a component
selector	Used as HTML tag <app-user>
templateUrl	HTML file
styleUrls	CSS file
class UserComponent	Holds data & logic

Using a Component

Once created, use it like a custom HTML tag:

<app-user></app-user>



What is String Interpolation in Angular?

String Interpolation is used to display data from TypeScript into HTML.

Syntax

{{ expression }}

👉 Angular evaluates the expression and shows the result in the UI.


Basic String Interpolation Example

Component (TypeScript)

export class UserComponent {
  name: string = 'Shiva';
  course: string = 'Angular';
}

Template (HTML)

<h1>Welcome {{ name }}</h1>
<p>You are learning {{ course }}</p>

Output on Screen

Welcome Shiva
You are learning Angular

Interpolation with Expressions
You can use expressions, not just variables.
<p>2 + 2 = {{ 2 + 2 }}</p>
<p>Name Length: {{ name.length }}</p>
<p>Uppercase Name: {{ name.toUpperCase() }}</p>

nterpolation with Methods
Component
export class UserComponent {
  getMessage() {
    return 'Hello from Angular Component';
  }
}


Template

<p>{{ getMessage() }}</p>

<button (click)="display3()">Click here</button>