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.

Component is a reusable part of an Angular application that controls a specific UI and its behavior.

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.

export class App { }

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>

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


Template

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

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

1. Create the component
Open the Angular project terminal and run:
ng generate component addition

Short form:
ng g c addition

Angular will create something like:
src/app/addition/
    addition.ts
    addition.html
    addition.css
    addition.spec.ts

2. Write the component logic
In addition.ts:
import { Component } from '@angular/core';

@Component({
  selector: 'app-addition',
  imports: [],
  templateUrl: './addition.html',
  styleUrl: './addition.css'
})
export class Addition {

  num1 = 0;
  num2 = 0;
  result = 0;

  add() {
    this.result = this.num1 + this.num2;
  }
}

3. Create the HTML
In addition.html:
<h2>Addition Program</h2>

<input type="number" [(ngModel)]="num1" placeholder="Enter first number">

<br><br>

<input type="number" [(ngModel)]="num2" placeholder="Enter second number">

<br><br>

<button (click)="add()">Add</button>

<h3>Result: {{ result }}</h3>

4. Import FormsModule
Because we're using [(ngModel)], add FormsModule:
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-addition',
  imports: [FormsModule],
  templateUrl: './addition.html',
  styleUrl: './addition.css'
})
export class Addition {

  num1 = 0;
  num2 = 0;
  result = 0;

  add() {
    this.result = this.num1 + this.num2;
  }
}

5. Use the Addition Component
In your app.html, write:
<app-addition></app-addition>

The complete flow is:
User enters:
   10
    +
   20
    ↓
[(ngModel)]
    ↓
num1 = 10
num2 = 20
    ↓
add() method
    ↓
result = 30
    ↓
Result: 30

TypeScript Mini Tutorial

1. Variables

JavaScript:

let name = "Shiva";
let age = 40;

TypeScript allows you to specify the type:

let name: string = "Shiva";
let age: number = 40;
let isActive: boolean = true;

Basic types:

string
number
boolean
array
object


2. Type Inference

You don't always need to specify the type.

let name = "Shiva";

TypeScript automatically understands:

name → string

Similarly:

let age = 40;

TypeScript understands:

age → number

So both are valid:

let name: string = "Shiva";

and:

let name = "Shiva";


3. Functions

JavaScript:

function add(a, b) {
  return a + b;
}

TypeScript:

function add(a: number, b: number): number {
  return a + b;
}

Here:

a: number      → a must be number
b: number      → b must be number
: number       → function returns number

Usage:

let result = add(10, 20);

console.log(result);

Output:

30


4. Arrays

You can specify what type of data an array contains.

let names: string[] = ["Shiva", "Rahul", "Amit"];

Numbers:

let marks: number[] = [80, 90, 75];

You can also write:

let names = ["Shiva", "Rahul", "Amit"];

TypeScript automatically knows it's a string[].


5. Objects

Example:

let student = {
  name: "Rahul",
  age: 21,
  course: "Angular"
};

TypeScript understands the types automatically:

name   → string
age    → number
course → string

You can access them:

console.log(student.name);
console.log(student.age);


6. Interface ⭐

Interfaces are very important in Angular.

Suppose you have a student:

interface Student {
  name: string;
  age: number;
  course: string;
}

Now create a student:

let student: Student = {
  name: "Rahul",
  age: 21,
  course: "Angular"
};

If you make a mistake:

let student: Student = {
  name: "Rahul",
  age: "21",  // ❌ Error
  course: "Angular"
};

TypeScript catches it because age must be a number.


7. Classes ⭐

Angular uses classes heavily.

class Student {

  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  display() {
    console.log(this.name);
    console.log(this.age);
  }
}

Create an object:

let s1 = new Student("Rahul", 21);

s1.display();

Output:

Rahul
21


8. Access Modifiers

TypeScript has:

public
private
protected

Example:

class Student {

  private marks: number = 90;

  displayMarks() {
    console.log(this.marks);
  }
}

You cannot directly access:

student.marks; // ❌

because marks is private.


9. Optional Properties

Sometimes a property may or may not exist.

Use ?.

interface Student {
  name: string;
  age: number;
  phone?: string;
}

Now this is valid:

let student: Student = {
  name: "Rahul",
  age: 21
};

phone is optional.


10. Union Types

A variable can accept more than one type.

let id: number | string;

Now both are allowed:

id = 101;

id = "ST101";

But:

id = true; // ❌

because boolean wasn't included.


11. any

You can use:

let data: any;

It can contain anything: