What is Angular

Introduction

Angular helps you build web apps easily by giving you ready tools and rules. It makes your app organized and fast.

You want to build a website that works well on phones and computers.

You need to create a complex app with many pages and features.

You want to keep your code clean and easy to update.

You want to use a popular tool that many developers know.

You want to add interactive parts like buttons and forms that react quickly.

Syntax

Angular

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-angular-app';
}

@Component marks a class as a part of the app UI.

selector is the HTML tag to use this component.

Examples

This example shows a simple component that displays a greeting.

Angular

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

@Component({
  selector: 'hello-world',
  template: '<h1>Hello, Angular!</h1>'
})
export class HelloWorldComponent {}

This example uses Angular signals to create a counter that updates when you click a button.

Angular

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

@Component({
  selector: 'counter-app',
  template: `
    <button (click)="count.update(c => c + 1)">Add</button>
    <p>Count: {{ count() }}</p>
  `
})
export class CounterApp {
  count = signal(0);
}

Sample Program

This component shows a button and a number. Each time you click the button, the number goes up by one.

Angular

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

@Component({
  selector: 'app-root',
  template: `
    <h1>Welcome to Angular!</h1>
    <button (click)="increment()">Click me</button>
    <p>You clicked {{ count() }} times.</p>
  `
})
export class AppComponent {
  count = signal(0);

  increment() {
    this.count.update(c => c + 1);
  }
}

Important Notes

Angular uses components to build the UI in small pieces.

Signals are a new way in Angular to handle data that changes over time.

Angular apps are easy to scale and maintain because of their structure.

Summary

Angular is a tool to build web apps with ready-made rules and parts.

It helps make apps that work well on many devices and are easy to update.

Components and signals are key ideas in Angular to build interactive pages.