Learn the Fundamentals of Angular with Practical Examples

Angular is a popular open-source framework for building modern web applications. It is maintained by Google and allows developers to build dynamic, interactive, and high-performance web applications with ease. In this answer, we will discuss some of the fundamentals of Angular and provide practical examples to illustrate these concepts.

Components

Components are the building blocks of an Angular application. A component is a self-contained module that encapsulates the logic and UI of a specific feature or functionality. Each component consists of a template, a class, and styles. The template defines the UI, the class provides the logic, and the styles define the appearance of the component. Here's an example of a simple component in Angular:

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

@Component({
  selector: 'app-hello',
  template: '<h1>Hello, {{name}}!</h1>',
})
export class HelloComponent {
  name = 'Angular';
}

In this example, we have created a component called `HelloComponent`. It has a selector of `app-hello` and a template that displays a greeting message with the name "Angular".

Modules

Modules are used to organize the components, services, and other related code of an Angular application into functional units. Each Angular application has at least one module, called the root module. Modules can be used to import and export components, services, and other modules. Here's an example of a simple module in Angular:

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

In this example, we have created a module called `AppModule`. It imports the `BrowserModule` and declares the `AppComponent`. It also sets the `AppComponent` as the bootstrap component for the module.

Services

Services are used to encapsulate the business logic of an Angular application. They are singletons that can be injected into components, modules, and other services. Services can be used to communicate with APIs, handle authentication, and perform other tasks that are not related to the UI. Here's an example of a simple service in Angular:

typescript
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  private users = ['Alice', 'Bob', 'Charlie'];

  getUsers(): string[] {
    return this.users;
  }

  addUser(name: string): void {
    this.users.push(name);
  }
}

In this example, we have created a service called `UserService`. It has a private `users` array that contains the names of some users. It also has two methods, `getUsers()` and `addUser(name: string)`, which can be used to retrieve and add users, respectively.

Directives

Directives are used to add behavior to HTML elements in an Angular application. There are two types of directives in Angular: structural directives and attribute directives. Structural directives change the layout of the DOM, while attribute directives change the appearance or behavior of an element. Here's an example of a simple attribute directive in Angular:

typescript
import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
})
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

In this example, we have created a directive called `HighlightDirective`. It sets the background color of an element to yellow when it is applied to the element.