Angular has main eight building blocks.There are,

01)Modules

02)Components

03)Templates

04)Metadata

05)Data binding

06)Directives

07)Services

08)Dependency injection

Let us consider the above building blocks one by one.

Modules

Angular apps are modular and to maintain modularity, we have Angular modules or you can say NgModules. Every Angular app contains at least one Angular module, i.e. the root module. Generally, it is named as AppModule. The root module can be the only module in a small application. While most of the apps have multiple modules. You can say, a module is a cohesive block of code with a related set of capabilities that have a specific application domain or a workflow. Any angular module is a class with @NgModule decorator.

Decorators are functions that modify JavaScript classes. Decorators are basically used for attaching metadata to classes so that, it knows the configuration of those classes and how they should work. NgModule is a decorator function that takes metadata objects whose properties describe the module. The properties are:

• declarations: The classes that are related to views and they belong to this module. There are three classes of Angular that can contain view: components, directives, and pipes. We will talk about them in a while.
• exports: The classes that should be accessible to the components of other modules.
• imports: Modules whose classes are needed by the component of this module.
• providers: Services present in one of the modules which are to be used in the other modules or components. Once a service is included in the providers it becomes accessible in all parts of that application
• bootstrap: The root component which is the main view of the application. This root module only has this property and it indicates the component that is to be bootstrapped.

Components

Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.

Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated for a given element in a template.

Note that, in addition to these options for configuring a directive, you can control a component’s runtime behavior by implementing life-cycle hooks.

more details..
https://angular.dev/api/core/Component

Templates

You define a component’s view with its companion template. A template is a form of HTML that tells Angular how to render the component.

Views are typically arranged hierarchically, allowing you to modify or show and hide entire UI sections or pages as a unit. The template immediately associated with a component defines that component’s host view. The component can also define a view hierarchy, which contains embedded views, hosted by other components.

A view hierarchy can include views from components in the same NgModule, but it also can (and often does) include views from components that are defined in different NgModules.

Metadata

Metadata tells Angular how to process a class.

Looking back at the code for CustomerComponent, you can see that it’s just a class. There is no evidence of a framework, no “Angular” in it at all.

In fact, CustomerComponent really is just a class. It’s not a component until you tell Angular about it.

To tell Angular that CustomerComponent is a component, attach metadata to the class.

In TypeScript, you attach metadata by using a decorator. Here’s some metadata for CustomerComponent:

Here is the @Component decorator, which identifies the class immediately below it as a component class.

The @Component decorator takes a required configuration object with the information Angular needs to create and present the component and its view.

Here are a few of the most useful @Component configuration options:

• selector: CSS selector that tells Angular to create and insert an instance of this component where it finds a tag in parent HTML. For example, if an app’s HTML contains , then Angular inserts an instance of the CustomerComponent view between those tags.
• templateUrl: module-relative address of this component’s HTML template, shown above.
• providers: array of dependency injection providers for services that the component requires. This is one way to tell Angular that the component’s constructor requires a CustomerService so it can get the list of heroes to display.

The metadata in the @Component tells Angular where to get the major building blocks you specify for the component.
The template, metadata, and component together describe a view.

Apply other metadata decorators in a similar fashion to guide Angular behavior. @Injectable, @Input, and @Output are a few of the more popular decorators.

The architectural takeaway is that you must add metadata to your code so that Angular knows what to do.

Data Binding

Data binding automatically keeps your page up-to-date based on your application’s state. You use data binding to specify things such as the source of an image, the state of a button, or data for a particular user.

more details…
https://angular.dev/guide/templates/binding

Directives

Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by directives.

A directive is a class with a @Directive decorator. A component is a directive-with-a-template; a @Component decorator is actually a @Directive decorator extended with template-oriented features.

While a component is technically a directive, components are so distinctive and central to Angular applications that this architectural overview separates components from directives.
more details….
https://angular.dev/guide/directives/

Services

Service is a broad category encompassing any value, function, or feature that an application needs. A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.

Examples include:

• logging service
• data service
• message bus
• tax calculator
• application configuration There is nothing specifically Angular about services. Angular has no definition of a service. There is no service base class, and no place to register a service. Yet services are fundamental to any Angular application. Components are big consumers of services.

more details…
https://angular.dev/guide/di

Dependency injection

Dependency injection is a way to supply a new instance of a class with the fully-formed dependencies it requires. Most dependencies are services. Angular uses dependency injection to provide new components with the services they need.

Angular can tell which services a component needs by looking at the types of its constructor parameters. For example, the constructor of your CustomerComponent needs a CustomerService:

When Angular creates a component, it first asks an injector for the services that the component requires.

An injector maintains a container of service instances that it has previously created. If a requested service instance is not in the container, the injector makes one and adds it to the container before returning the service to Angular. When all requested services have been resolved and returned, Angular can call the component’s constructor with those services as arguments. This is dependency injection.