Angular Core Deep Dive

Angular is a popular JavaScript framework for building web applications. At the core of Angular is the @angular/core module, which provides essential features for building Angular applications.

Let's take a deep dive into some of the key features of the @angular/core module and how they work with an example.

Component: The @Component decorator is used to define a component in Angular. A component is a reusable piece of code that defines the view and behavior of a part of the application. Here is an example of a simple component that displays a greeting message:

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

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

In this example, the @Component decorator is used to define a component with a selector of 'app-greeting' and a template that displays a greeting message with the name property.

Directive: The @Directive decorator is used to create a custom directive in Angular. Directives are used to add behavior to elements in the DOM. Here is an example of a directive that changes the background color of an element when it is clicked:

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) { }

  @HostListener('click') onClick() {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }
}

In this example, the @Directive decorator is used to define a directive with a selector of '[appHighlight]' and a HostListener that changes the background color of the element when it is clicked.

Service: The @Injectable decorator is used to create a service in Angular. Services are used to share data and functionality between components. Here is an example of a service that retrieves data from an API:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get('https://jsonplaceholder.typicode.com/posts');
  }
}

In this example, the @Injectable decorator is used to define a service with the providedIn: 'root' option, which makes the service available throughout the application. The service uses the HttpClient module to make a GET request to an API and return the data.

Overall, the @angular/core module provides essential features for building Angular applications, including components, directives, and services. By using these features, developers can create reusable and maintainable code that makes it easier to build complex web applications.

Any Queries and Question please comment.

Thank You for reading 😊