Components, modules, and services

Components in Angular
Components are the fundamental building blocks of Angular applications

They encapsulate a specific part of the user interface (UI) and its associated
behavior. Each component acts as a self-contained unit, managing its own logic and
presentation.
Benefits of components

● Components enable a modular structure,

01 Modularity making it easier to understand, maintain,
and extend the application.

● Components can be reused across

02 Reusability
different parts of the application,
promoting code reuse and minimizing
duplication.

● Each component is encapsulated,

03 Isolation
reducing the risk of unintended
interactions with other parts of the
application.
Create a Component

Use below command to generate the component in

necessary files and folders.

ng generate component <component_name>

OR

ng g c <component_name>
Basic Example on Angular component
Step 1: Create a component by using below command

ng g c first_task

In this command we created first_task as a component once this command get

execute below files will get generated in your project folder.
Step 2: Update \src\app\app.component.html file

Once you make changes execute ng serve

<h1> hello welcome</h1>
command on terminal to get find changes on
localhost server
Step 3: Update\src\app\first-task\first_task.component.html file

<h3>Angular Component Example</h3>

Go to your \src\app\first-task\first_task.component.ts file and copy selector data

Copy ‘app-textcomponent’
Step 4: go back to \src\app\app.component.html file and update
custom tag in the same file.
After updating this file
<p>Hello World</p> we can see
<app-textcomponent></app-textcomponent> first_task.component.ht
ml file data on
localhost
Using component in Angular
Go to component.html and component.css files and write the necessary
code in both of the files.

Write corresponding code is component.ts extension file.

Run the Angular app using ng serve –open

Remember
What is the purpose of the @Component decorator in Angular?

A. It defines the component's template.

B. It provides dependency injection for the component.
C. It configures the component metadata.
D. It handles component events.
C
 Apply
What is the purpose of the *ngFor directive in an Angular component
template?

A. It creates a conditional statement.

B. It provides two-way data binding.
C. It iterates over a list of items.
D. It defines a custom event. C
Angular Modules

Modules in Angular are organizational units that group related components, directives, pipes,
and services.

They encapsulate and organize code, promoting modularity and maintainability.

Why do we need Modules in Angular?

Modules help organize and structure an Angular

Organization application.

Modules facilitate code reuse by encapsulating related

Reusability
functionality.

Maintainability Modules make it easier to manage and maintain large

codebases.
Creating Angular Modules

To create module we can use

‘@NgModule’ Decorator.

When we create a new project

using the Angular –cli
command, the ngmodule is
created in the app.module.ts
file by default

App.module.ts file
Key Properties of an Angular Module
● The declarations array includes the components, directives,
Declaration and pipes that belong to the module.

● These are the building blocks that are scoped to the module.

declarations: [
AppComponent,
NewCmpComponent
]
Key Properties of an Angular Module
● The imports array lists other modules that this module depends
Imports on.
● Importing modules allows the components of the current
module to use components from other modules.

● import { FormsModule } from '@angular/forms'; // if your

application need form you can include like this.
● import in the @NgModule will be like the following −

imports: [
BrowserModule,
FormsModule
]
Key Properties of an Angular Module
● The providers array contains services that the module
Providers contributes to the dependency injection system.
● These services are available for injection in the components of
the module.

● The bootstrap array specifies the component that should be

Bootstrap bootstrapped when the module is loaded.
● This is typically the root component of the application.
Understand
What does the 'declarations' property in an NgModule decorator include?

A. Services
B. Components, directives, and pipes
C. External modules
D. Bootstrap components
B
 Apply
In an Angular module, what does the 'bootstrap' property specify?

A. The main application module

B. The root component to be bootstrapped
C. The lazy-loaded modules
D. External modules
B
Angular Services

Services are a way to organize and share code across components.

They provide a centralized place for features, data, and logic that are
independent of components.
Why do we need Services in Angular?

● Encourages code reuse and maintainability.

● Facilitates separation of concerns.

● Supports a modular and scalable application

architecture.
Creating Angular Services
Use the Angular CLI to generate a service . follow bellow syntax to create services

ng generate service service_name

This will create two files:

● src/app/service_name.service.ts: The TypeScript file for

your service.

● src/app/service_name.service.spec.ts: The unit test file for

your service.
 Implement the Service

Syntax to Implement angular services

To Implement angular services we import { Injectable } from

need to composed three things: '@angular/core';

1) create an export class @Injectable({

providedIn: 'root', // or
2) decorate the class with @Injectable specify a module
decorator })
export class MyService {
3) import the injectable decorator from // Service logic goes here
the @angular/core library }
 Implement the Service
import { Injectable } from
Open the generated service file '@angular/core';
(service_name.service.ts) using
your preferred code editor. You'll @Injectable({
find a basic service structure with providedIn: 'root'
Example })
an @Injectable decorator. Add your
service logic inside the class export class DataService {
private data: string[] = ['Item
1', 'Item 2', 'Item 3'];

getData(): string[] {
return this.data;
}

addData(newItem: string): void {

this.data.push(newItem);
}
}
 Use the Service in a Component
Open a component file (e.g., import { Component } from '@angular/core';
import { DataService } from './data.service';
src/app/app.component.ts) and
import the service. Inject the @Component({
service into the component's selector: 'app-root',
constructor templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
items: string[];

constructor(private dataService: DataService) {

this.items = this.dataService.getData();
}

addItem(newItem: string): void {

this.dataService.addData(newItem);
this.items = this.dataService.getData(); // Update
the displayed items
}
}
 Update the Component's Template
Open the component's <div *ngFor="let item of items">
template file (e.g., {{ item }}
src/app/app.component.htm </div>
l) and use the service data
<input #newItemInput placeholder="New Item">
<button
(click)="addItem(newItemInput.value)">Add
Item</button>
Run The Application

Use below command to run application

ng serve

Visit http://localhost:4200 in your browser to see

your Angular app with the newly created service
in action.
 Apply
In which file type are Angular services typically defined?

A) .html
B) .ts
C) .css
D) .json
B
 Craete
Demonstrate how to create an Angular service using the Angular CLI.

A) ng new service MyService

B) ng create service MyService
C) ng generate service MyService
D) ng build service MyService
C
Thank You