Monday, July 6, 2026

How to Configure DevOps Pipelines: A Real-Time CI/CD Example

In moern software teams, DevOps pipelines are the backbone that connects code to production. Instead of manually building, testing, and deploying applications, we automate these steps into a smooth flow known as a CI/CD pipeline. This article explains what a DevOps pipeline is and walks through a real-time example you can use for your own projects.

What Is a DevOps Pipeline?

A DevOps pipeline is a series of automated steps that take your application from source code to a running, monitored service. It usually includes:

Code: Developers push changes to a version control system like Git.
Build: The pipeline compiles/assembles the application.
Test: Automated tests run to catch bugs early.
Release: Successful builds are packaged as deployable artifacts.
Deploy: Artifacts are deployed to environments (dev, test, production).
Monitor: Logs and metrics are collected to ensure the system is healthy.

When all these stages run automatically on every code change, you get Continuous Integration (CI) and Continuous Delivery/Deployment (CD).

Why Pipelines Matter in Real Projects

In a real-time project, multiple developers work on the same codebase. Without a pipeline:

Builds may fail on one machine but not another.
Manual deployments are error-prone and slow.
Bugs reach production because tests are skipped.

With a CI/CD pipeline:

Every push triggers a consistent build and test process.
Deployments follow the same automated, repeatable steps.
You get faster feedback and higher confidence in releases.

For teams building web applications, APIs, or microservices, a good pipeline is not optional—it is essential.

Real-Time Scenario: Web App CI/CD Pipeline

Let’s take a practical example you can relate to.

Imagine a small team building a Node.js web application. The code is stored in a Git repository. The team wants this behavior:

Developer pushes code to the main branch.
Pipeline automatically runs:
- Install dependencies
- Run unit tests
- Build the application
If everything passes, the pipeline deploys the app to a cloud Web App (for example, Azure Web App or any similar platform).
The team can see logs and monitor the application after every deployment.

This is a classic real-time CI/CD pipeline scenario.

Designing the Pipeline Stages

To implement this behavior, we can design the pipeline with two main stages:

1. Build and Test (CI)

This stage should:

Check out the latest code.
Install required tools and dependencies.
Run automated tests.
Create a build output ready for deployment.

If any step fails, the pipeline should stop and notify the team.

2. Deploy (CD)

This stage should:

Take the successful build artifact.
Deploy it to the chosen environment (dev, test, or production).
Optionally run post-deployment checks (smoke tests).
Notify the team on success or failure.

Separating Build and Deploy stages makes it easier to control which environments receive which build.

Example Pipeline Configuration (YAML Style)

Many modern tools (Azure DevOps, GitHub Actions, GitLab CI, etc.) use YAML configuration files to define pipelines. Below is a simplified pipeline configuration that you can adapt for your own blog readers.


text
trigger:
  branches:
    include:
      - main

pool:
  vmImage: 'ubuntu-latest'

variables:
  appName: 'my-demo-webapp'
  environment: 'production'

stages:
- stage: Build
  displayName: 'Build and Test'
  jobs:
  - job: BuildJob
    steps:
    - checkout: self

    - task: NodeTool@0
      inputs:
        versionSpec: '18.x'
      displayName: 'Use Node.js 18'

    - script: |
        npm install
        npm test
        npm run build
      displayName: 'Install, test, and build'

    - task: ArchiveFiles@2
      inputs:
        rootFolderOrFile: 'dist'
        includeRootFolder: false
        archiveType: 'zip'
        archiveFile: '$(Build.ArtifactStagingDirectory)/drop.zip'
      displayName: 'Archive build output'

    - task: PublishBuildArtifacts@1
      inputs:
        pathtoPublish: '$(Build.ArtifactStagingDirectory)'
        artifactName: 'drop'
      displayName: 'Publish artifact'

- stage: Deploy
  displayName: 'Deploy to Production'
  dependsOn: Build
  jobs:
  - job: DeployJob
    steps:
    - download: current
      artifact: drop

    - script: |
        echo "Deploying $(appName) to $(environment) environment"
        # Replace this with your actual deploy command, e.g.:
        # az webapp deploy --name $(appName) --src-path "$(Pipeline.Workspace)/drop/drop.zip"
      displayName: 'Deploy application'

You can explain this YAML in your blog as follows:

trigger ensures the pipeline runs on every push to main.
pool defines the build agent (Ubuntu in this example).
The Build stage:
- Checks out code.
- Uses Node.js 18.
- Runs install, tests, and build.
- Archives and publishes the build as an artifact.
The Deploy stage:
- Downloads the artifact.
- Runs a deployment command (to a cloud platform or server).

How This Works in Real Time

In day-to-day development, this pipeline behaves like an automated assistant:

A developer fixes a bug and pushes code.
Within minutes, the pipeline:
- Builds the app.
- Runs tests.
- Deploys a new version if everything passes.
If a test fails, the pipeline stops and marks the run as failed.
The team checks the pipeline logs, fixes the issue, and pushes again.

This continuous loop greatly reduces the risk of broken code reaching production and makes releases faster and safer.

Best Practices for DevOps Pipelines

To make your pipelines robust for real-world use, consider these practices:

Keep pipelines fast: Slow pipelines reduce developer productivity.
Fail early: Run quick linting and unit tests before long integration tests.
Use separate environments: Deploy to dev, then test, then production with approvals.
Add quality gates: Include code quality checks, security scans, and test coverage thresholds.
Monitor everything: Collect logs and metrics from both pipelines and applications.

These small improvements add up to a professional, corporate-grade pipeline over time.

Saturday, July 4, 2026

Angular Directives – Complete Guide with All Examples

A Directive in Angular is a class that adds behavior to HTML elements or changes the structure of the DOM.

Think of a directive as an instruction to Angular.

For example:

Show or hide an element
Repeat an element
Change colors
Disable buttons
Highlight text
Apply validation
Display content based on user role

Types of Directives

Angular has three types of directives.

Angular Directives

        │
        ├──────────────┐
        │              │
        ▼              ▼
Structural      Attribute
Directives      Directives
        │
        ▼
Component
(Technically a directive with a template)

Type	Purpose	Example
Component Directive	Creates a view (template)	`<app-employee>`
Structural Directive	Changes the DOM structure	`ngIf`, `ngFor`, `*ngSwitch`
Attribute Directive	Changes appearance or behavior	`ngClass`, `ngStyle`, custom directives

1. Component Directive

A component is actually a directive with its own HTML template.

Example:

@Component({
  selector: 'app-employee',
  template: `<h2>Employee Details</h2>`
})
export class EmployeeComponent { }

Use:

<app-employee></app-employee>

Output:

Employee Details

2. Structural Directives

Structural directives add or remove elements from the DOM.

They are written with *.

A. *ngIf

Displays an element only if the condition is true.

Example

isLoggedIn = true;

<div *ngIf="isLoggedIn">
    Welcome User
</div>

Output

Welcome User

If:

isLoggedIn = false;

Output

Nothing is displayed.

Real-Time Example

Internet Banking

User Logged In

↓

Dashboard Visible

Otherwise

Please Login

ngIf with else

<div *ngIf="isLoggedIn; else loginPage">
    Welcome User
</div>

<ng-template #loginPage>
    Please Login
</ng-template>

B. *ngFor

Used to repeat HTML.

Component

employees = [
  "Mahesh",
  "Ravi",
  "Priya",
  "Kiran"
];

HTML

<ul>
    <li *ngFor="let emp of employees">
        {{emp}}
    </li>
</ul>

Output

Mahesh
Ravi
Priya
Kiran

Real-Time Example

Employee List

Employee Table

↓

100 Employees

↓

*ngFor repeats rows

ngFor with Index

<li *ngFor="let emp of employees; let i=index">
    {{i+1}} - {{emp}}
</li>

Output

1 - Mahesh
2 - Ravi
3 - Priya

ngFor with first and last

<li *ngFor="let emp of employees;
            let first=first;
            let last=last">

{{emp}}

{{first}}

{{last}}

</li>

Output

Mahesh   true    false
Ravi     false   false
Priya    false   true

C. ngSwitch

Component

role = "Admin";

HTML

<div [ngSwitch]="role">

    <p *ngSwitchCase="'Admin'">
        Admin Dashboard
    </p>

    <p *ngSwitchCase="'Employee'">
        Employee Dashboard
    </p>

    <p *ngSwitchDefault>
        Invalid User
    </p>

</div>

Output

Admin Dashboard

Real-Time Example

Admin

↓

Admin Dashboard

Employee

↓

Employee Dashboard

3. Attribute Directives

Attribute directives change appearance or behavior.

ngClass

Component

isActive = true;

HTML

<div
[ngClass]="{'active':isActive}">
Employee
</div>

CSS

.active{
color:red;
font-weight:bold;
}

Output

Employee (Red Color)

Real-Time Example

Employee Status

Active Employee

↓

Green Color

Inactive

↓

Gray Color

ngStyle

<div
[ngStyle]="{

'color':'blue',

'font-size':'25px'

}">
Employee
</div>

Output

Blue Employee

Real-Time Example

Bank Balance

If balance is low

<div
[ngStyle]="{
'color':
balance<1000?
'red':'green'
}">
{{balance}}
</div>

Built-in Attribute Directive Example

Disable Button

<button
[disabled]="isSaving">
Save
</button>

Custom Attribute Directive

Suppose HR wants every employee card highlighted on mouse hover.

Generate Directive

ng g directive highlight

highlight.directive.ts

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

@Directive({
selector:'[appHighlight]'
})
export class HighlightDirective{

constructor(
private element:ElementRef){}

@HostListener('mouseenter')

mouseEnter(){

this.element.nativeElement.style.backgroundColor="yellow";

}

@HostListener('mouseleave')

mouseLeave(){

this.element.nativeElement.style.backgroundColor="white";

}

}

Use

<div appHighlight>

Employee Card

</div>

Output

Mouse Hover

↓

Yellow Background

Mouse Leave

↓

White Background

Custom Permission Directive

<div *appHasRole="'Manager'">

Salary Details

</div>

Logic

if(role==="Manager")
{
show=true;
}

Real-Time Example

Employee Login

Role

↓

Employee

↓

Salary Hidden

Manager

↓

Salary Visible

Custom Disable Directive

<input appDisable />

Directive

this.element.nativeElement.disabled=true;

Output

Textbox Disabled

Real-Time Employee Portal

Employee Dashboard

        │
        ▼

*ngIf

Show Attendance

        │
        ▼

*ngFor

List Employees

        │
        ▼

ngClass

Green Active Employee

        │
        ▼

ngStyle

Salary Red

        │
        ▼

appHighlight

Hover Effect

        │
        ▼

appHasRole

Manager Only

Structural vs Attribute Directives

Feature	Structural Directive	Attribute Directive
Changes DOM	Yes	No
Adds/Removes Elements	Yes	No
Changes Style	No	Yes
Uses `*`	Yes	No
Examples	`ngIf`, `ngFor`, `*ngSwitch`	`ngClass`, `ngStyle`, `appHighlight`

Interview Questions

1. What is a directive in Angular?

A directive is a class that adds behavior to HTML elements or changes the DOM structure.

2. How many types of directives are there?

Three:

Component Directives
Structural Directives
Attribute Directives

3. What is the difference between `*ngIf` and `[hidden]`?

`*ngIf`	`[hidden]`
Removes the element from the DOM when false	Keeps the element in the DOM but hides it using CSS

4. What is the difference between `ngClass` and `ngStyle`?

`ngClass`	`ngStyle`
Applies one or more CSS classes	Applies inline CSS styles

5. Can we create custom directives?

Yes. Angular allows you to create reusable custom directives using the @Directive decorator.

Note for Angular 17+: The examples above use the classic structural directives (*ngIf, *ngFor, *ngSwitch), which are still widely used. Angular 17 also introduced new built-in control flow syntax (@if, @for, and @switch) as a modern alternative. Many existing projects and interview questions still use the * syntax, so it's important to understand both.

Creating a Custom Component in Angular with a Real-Time Example

A Component is the basic building block of an Angular application. It combines HTML (UI), TypeScript (logic), and CSS (styles) into a reusable unit.

Real-Time Scenario

Suppose you are building an Employee Management System.

The application has multiple pages where employee information is displayed:

Dashboard
Employee List
Employee Details
HR Portal

Instead of writing the same HTML repeatedly, you create a reusable Employee Card Component.

Step 1: Create the Component

Using Angular CLI:

ng generate component employee-card

ng g c employee-card

Angular creates the following files:

employee-card/
│
├── employee-card.component.ts
├── employee-card.component.html
├── employee-card.component.css
└── employee-card.component.spec.ts

Step 2: Employee Card Component

employee-card.component.ts

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

@Component({
  selector: 'app-employee-card',
  templateUrl: './employee-card.component.html',
  styleUrls: ['./employee-card.component.css']
})
export class EmployeeCardComponent {

  @Input() employeeName: string = '';
  @Input() designation: string = '';
  @Input() salary: number = 0;
  @Input() department: string = '';

}

Explanation

@Component tells Angular this class is a component.
selector is the HTML tag used to display the component.
@Input() receives data from the parent component.

Step 3: Employee Card HTML

employee-card.component.html

<div class="employee-card">

    <h2>{{employeeName}}</h2>

    <p><strong>Designation:</strong> {{designation}}</p>

    <p><strong>Department:</strong> {{department}}</p>

    <p><strong>Salary:</strong> {{salary | currency:'INR'}}</p>

</div>

Step 4: CSS

employee-card.component.css

.employee-card{

    border:1px solid gray;

    padding:20px;

    border-radius:10px;

    width:300px;

    margin:15px;

    box-shadow:0 0 8px lightgray;

}

Step 5: Use the Component in App Component

app.component.ts

export class AppComponent {

    employee={

        name:'Mahesh',

        designation:'Senior Software Engineer',

        department:'IT',

        salary:85000

    };

}

app.component.html

<app-employee-card

    [employeeName]="employee.name"

    [designation]="employee.designation"

    [department]="employee.department"

    [salary]="employee.salary">

</app-employee-card>

Output

----------------------------------------
Mahesh

Designation : Senior Software Engineer

Department  : IT

Salary       : ₹85,000.00
----------------------------------------

Data Flow

App Component (Parent)

Employee Object

        │
        ▼

EmployeeCard Component

(@Input Properties)

        │
        ▼

HTML Template

        │
        ▼

Browser Output

Real-Time Banking Example

Imagine an Internet Banking application displaying multiple bank accounts.

Parent Component

accounts = [
  {
    accountNo: "1234567890",
    holder: "Ravi Kumar",
    balance: 250000
  },
  {
    accountNo: "9876543210",
    holder: "Priya Sharma",
    balance: 125000
  }
];

Parent HTML

<app-account-card
    *ngFor="let account of accounts"
    [accountNumber]="account.accountNo"
    [accountHolder]="account.holder"
    [balance]="account.balance">
</app-account-card>

Output

-------------------------
Ravi Kumar

Account : 1234567890

Balance : ₹250,000
-------------------------

-------------------------
Priya Sharma

Account : 9876543210

Balance : ₹125,000
-------------------------

The same component is reused for every account, making the UI modular and maintainable.

Advantages of Custom Components

Reusability: Create once, use anywhere.
Maintainability: Update one component to reflect changes everywhere.
Separation of Concerns: UI, logic, and styles remain organized.
Easy Testing: Components can be tested independently.
Scalability: Essential for large enterprise Angular applications.

Interview Questions

1. What is a custom component in Angular?

A custom component is a reusable UI element created by developers using the @Component decorator. It encapsulates HTML, TypeScript, and CSS into a single unit.

2. How do you create a component?

Using the Angular CLI:

ng generate component component-name

ng g c component-name

3. How do you pass data from a parent component to a child component?

By using the @Input() decorator.

@Input() employeeName: string = '';

4. How do you display a custom component?

By using its selector in another component's template.

<app-employee-card></app-employee-card>

5. Why are custom components important?

They promote code reuse, improve maintainability, simplify testing, and help organize applications into modular, reusable pieces.

Custom Components, Directives, and Pipes in Angular – Complete Guide with Real-Time Examples

Angular applications are built using three fundamental building blocks:

Components – Build reusable UI sections.
Directives – Add or modify the behavior of HTML elements.
Pipes – Transform data for display without changing the original value.

A real-world Employee Management System uses all three together.

Employee Management Application

           Angular
               │
    ┌──────────┼──────────┐
    │          │          │
Components  Directives   Pipes
    │          │          │
Employee    Highlight    Currency
Dashboard   Permission   Date
Login       Validation   Custom Format

1. Custom Components

What is a Component?

A component is a reusable UI element that contains:

HTML (Template)
CSS (Styles)
TypeScript (Logic)

Every screen in Angular is made up of components.

Real-Time Banking Example

Consider an Online Banking Application.

Internet Banking

-----------------------------------------
Header Component
-----------------------------------------
Menu Component
-----------------------------------------
Account Summary Component
-----------------------------------------
Transaction Component
-----------------------------------------
Footer Component
-----------------------------------------

Instead of writing one huge page, each section becomes a reusable component.

Create Component

ng generate component employee

ng g c employee

Employee Component

employee.component.ts

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

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html'
})
export class EmployeeComponent {

  employeeName = "Mahesh";
  designation = "Software Engineer";

}

employee.component.html

<h2>{{employeeName}}</h2>

<p>{{designation}}</p>

App Component

<app-employee></app-employee>

Output

Mahesh

Software Engineer

Real-Time Example

Employee Dashboard

Dashboard

↓

Employee Component

↓

Employee Details

↓

Salary Component

↓

Leave Component

↓

Attendance Component

Each is a separate component.

Parent to Child Communication

Parent Component

<app-employee
[employeeName]="name">
</app-employee>

Child Component

@Input()
employeeName:string="";

Output

Mahesh

Child to Parent Communication

Child

@Output()
save=new EventEmitter();

SaveEmployee(){

this.save.emit();

}

Parent

<app-employee
(save)="SaveCompleted()">
</app-employee>

Real-Time Example

Employee Form

Employee Component

↓

Click Save

↓

EventEmitter

↓

Parent Dashboard Refreshes

Benefits of Components

Reusable
Easy to Maintain
Independent
Testable
Modular

2. Custom Directives

What is a Directive?

Directives change the appearance or behavior of HTML elements.

Angular has three types of directives:

Component Directives
Structural Directives
Attribute Directives

Structural Directives

These change the DOM structure.

Examples

*ngIf

*ngFor

*ngSwitch

Example

<div *ngIf="isAdmin">

Admin Panel

</div>

Attribute Directives

Change appearance.

Example

ngStyle

ngClass

<div
[ngStyle]="{'color':'red'}">
Employee
</div>

Custom Attribute Directive

Suppose HR wants employees with low performance highlighted in red.

Create Directive

ng generate directive highlight

highlight.directive.ts

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

@Directive({
 selector:'[appHighlight]'
})
export class HighlightDirective{

 constructor(private element:ElementRef){}

 @HostListener('mouseenter')

 onMouseEnter(){

 this.element.nativeElement.style.backgroundColor="yellow";

 }

 @HostListener('mouseleave')

 onMouseLeave(){

 this.element.nativeElement.style.backgroundColor="white";

 }

}

Use Directive

<p appHighlight>

Employee Name

</p>

Output

Mouse Hover

↓

Yellow Background

Mouse Leave

↓

White Background

Real-Time Banking Example

Low Balance

↓

Highlight Red

High Balance

↓

Highlight Green

Permission Directive Example

Only Managers can view salary.

<div *appHasRole="'Manager'">

Salary Details

</div>

Custom Directive

@Input()
appHasRole:string="";

Real-Time

Employee Login

↓

Role = Employee

↓

Salary Hidden

Manager

Role = Manager

↓

Salary Visible

Benefits of Directives

Reusable Behavior
Clean HTML
Better Readability
Centralized UI Logic

3. Custom Pipes

What is a Pipe?

Pipes transform data before displaying it.

Original data remains unchanged.

Example

Mahesh

↓

MAHESH

Built-in Pipes

uppercase

lowercase

date

currency

json

slice

percent

titlecase

Example

{{salary | currency}}

Output

₹45,000.00

Custom Pipe

Suppose HR wants Employee IDs displayed with prefix.

101

↓

EMP-101

Generate Pipe

ng generate pipe employeeid

employeeid.pipe.ts

import {
 Pipe,
 PipeTransform
} from '@angular/core';

@Pipe({
 name:'employeeid'
})

export class EmployeeidPipe
implements PipeTransform{

 transform(value:number){

 return "EMP-"+value;

 }

}

Use Pipe

{{101 | employeeid}}

Output

EMP-101

Banking Example

Original

Display

ACC-10001

Pipe

return "ACC-"+value;

Mask Account Number Pipe

Original

1234567890123456

Display

************3456

Pipe

transform(value:string){

return "************"+
value.slice(-4);

}

HTML

{{accountNumber | accountmask}}

Output

************3456

Real-Time Employee Example

Employee Object

employee={

id:101,

name:"Mahesh",

salary:75000,

joiningDate:new Date()

}

HTML

ID

{{employee.id | employeeid}}

<br>

Name

{{employee.name | uppercase}}

<br>

Salary

{{employee.salary | currency:'INR'}}

<br>

Joining

{{employee.joiningDate | date:'dd/MM/yyyy'}}

Output

ID : EMP-101

Name : MAHESH

Salary : ₹75,000

Joining : 15/03/2025

Complete Real-Time Architecture

Employee Portal

                 Angular
                    │
    ┌───────────────┼────────────────┐
    │               │                │
Component       Directive          Pipe
    │               │                │
Employee      Highlight          Currency
Login         Permission         Date
Dashboard     Validation         Employee ID
Attendance    Tooltip            Account Mask
Leave         Hover Effect       Uppercase

Components vs Directives vs Pipes

Feature	Component	Directive	Pipe
Purpose	Build UI	Modify behavior or appearance	Transform displayed data
Has HTML Template	Yes	No	No
Reusable	Yes	Yes	Yes
Used In	Screens and UI sections	HTML elements	Data binding expressions
Example	Employee List	Highlight invalid fields	Currency, Date, Masking

Real-Time Project Example (Employee Management)

Requirement	Angular Feature	Example
Employee Dashboard	Component	`<app-dashboard>`
Employee Details	Component	`<app-employee-details>`
Highlight overdue tasks	Directive	`appHighlight`
Restrict manager-only content	Directive	`appHasRole`
Format Employee ID	Pipe	`employeeid`
Display Salary	Built-in Pipe	`currency`
Format Joining Date	Built-in Pipe	`date`
Mask Aadhaar/Account Number	Custom Pipe	`accountmask`

Common Interview Questions

1. What is the difference between a Component and a Directive?

Answer: A component has its own template, styles, and logic to create a part of the UI. A directive does not have its own view; it only changes the behavior or appearance of existing DOM elements.

2. When should you create a custom directive?

Answer: When the same UI behavior (such as role-based visibility, hover effects, validation styling, or highlighting) is needed across multiple components.

3. When should you create a custom pipe?

Answer: When the same data formatting logic (such as masking account numbers, formatting employee IDs, or custom text transformations) is reused in multiple templates.

4. Are pipes suitable for heavy business logic?

Answer: No. Pipes should only be used for presentation logic. Complex business logic belongs in services or components.

5. How do Components, Directives, and Pipes work together?

Answer: Components build the UI, directives add reusable behavior to elements, and pipes format the displayed data, resulting in clean, maintainable, and reusable Angular applications.

Angular Lifecycle Hooks – Complete Guide with Real-Time Examples (Angular 16/17/18+)

Angular Lifecycle Hooks are special methods that Angular automatically calls during the lifecycle of a component.

Think of a component like a person.

Born → Constructor
Gets Data → ngOnInit
Receives Updates → ngOnChanges
Checks Changes → ngDoCheck
Displays Content → ngAfterViewInit
Destroyed → ngOnDestroy

Angular Component Lifecycle

Constructor
      │
      ▼
ngOnChanges
      │
      ▼
ngOnInit
      │
      ▼
ngDoCheck
      │
      ▼
ngAfterContentInit
      │
      ▼
ngAfterContentChecked
      │
      ▼
ngAfterViewInit
      │
      ▼
ngAfterViewChecked
      │
      ▼
ngOnDestroy

1. Constructor

Purpose

The constructor is the first method executed when Angular creates a component.

Used for:

Dependency Injection
Initializing services
Basic variable initialization

Example

constructor(private employeeService: EmployeeService) {
    console.log("Constructor Called");
}

Output

Constructor Called

Real-Time Example

Imagine opening Amazon.

When the page loads,

Angular creates ProductComponent.

Before displaying products,

Angular injects

ProductService
CartService
LoggerService

using Constructor.

Amazon Page

↓

Constructor

↓

Inject Services

↓

Load Component

2. ngOnChanges()

Purpose

Called whenever an Input property changes.

Only works with @Input().

Example

Parent Component

<app-child [employee]="employee"></app-child>

Child Component

@Input() employee:any;

ngOnChanges(changes: SimpleChanges){
   console.log(changes);
}

Output

Employee Changed

Real-Time Example

Employee Portal

Manager selects another employee.

Employee 101

↓

Employee 205

↓

Child Component Updated

↓

ngOnChanges()

Perfect example

Employee Details Screen

3. ngOnInit()

Purpose

Runs only once after Angular initializes the component.

Most commonly used hook.

Used for

API Calls
Loading data
Initial calculations

Example

ngOnInit(){

   this.loadEmployees();

}

GET /api/employees

Real-Time Banking Example

Customer Dashboard

After login

Angular calls

GET Account Details

GET Transactions

GET Loans

inside

ngOnInit()

4. ngDoCheck()

Purpose

Custom change detection.

Angular calls this hook during every change detection cycle.

Example

ngDoCheck(){

   console.log("Checking Changes");

}

Real-Time Example

Shopping Cart

User changes

Quantity
Price
Coupon

Angular continuously checks

Subtotal

GST

Discount

Final Amount

using ngDoCheck()

5. ngAfterContentInit()

Purpose

Runs once after external content is projected using

<ng-content>

Example

<app-card>

   <h2>Employee Information</h2>

</app-card>

Card Component

<div class="card">

<ng-content></ng-content>

</div>

ngAfterContentInit(){

console.log("Content Loaded");

}

Real-Time Example

Dashboard Card

Employee Name

Employee Salary

Employee Department

are projected into Card Component.

Angular executes

ngAfterContentInit()

6. ngAfterContentChecked()

Runs after every content check.

Example

ngAfterContentChecked(){

console.log("Content Checked");

}

Real-Time Example

Employee Dashboard

Manager changes employee role.

Projected content updates.

Angular verifies projected content.

7. ngAfterViewInit()

Purpose

Runs after the component view is fully initialized.

Most commonly used for

ViewChild
Charts
Google Maps
DataTables

Example

@ViewChild('txtName')
name!:ElementRef;

ngAfterViewInit(){

this.name.nativeElement.focus();

}

Real-Time Example

Cursor automatically focuses on

Username textbox.

Username

Password

Angular waits until UI is created.

Then

Focus()

inside

ngAfterViewInit()

8. ngAfterViewChecked()

Runs every time Angular checks component view.

Example

ngAfterViewChecked(){

console.log("View Checked");

}

Real-Time Example

Dashboard

Charts

Tables

Graphs

Whenever data changes,

Angular checks the whole view.

9. ngOnDestroy()

Purpose

Called before Angular destroys the component.

Used for cleanup.

Very important.

Used for

Unsubscribe Observable
Clear Timer
Remove Event Listener
Close SignalR Connection
Close WebSocket

Example

subscription!:Subscription;

ngOnInit(){

this.subscription=this.employeeService.getEmployees()
.subscribe();

}

ngOnDestroy(){

this.subscription.unsubscribe();

}

Real-Time Banking Example

Customer Dashboard

User logs out.

Angular

Disconnect SignalR

Stop Timer

Unsubscribe API

Remove Events

Destroy Component

Complete Real-Time Employee Management Example

Employee List

constructor()

↓

Inject EmployeeService

↓

ngOnInit()

↓

Call Employee API

↓

Display Employees

↓

Manager selects employee

↓

ngOnChanges()

↓

Employee Details Updated

↓

User edits salary

↓

ngDoCheck()

↓

Salary recalculated

↓

Dashboard Card Loaded

↓

ngAfterContentInit()

↓

Chart Loaded

↓

ngAfterViewInit()

↓

User navigates away

↓

ngOnDestroy()

↓

Unsubscribe APIs

Complete Sample Component

import {
 Component,
 OnInit,
 OnChanges,
 DoCheck,
 AfterContentInit,
 AfterContentChecked,
 AfterViewInit,
 AfterViewChecked,
 OnDestroy,
 Input,
 SimpleChanges
} from '@angular/core';

@Component({
 selector:'app-employee',
 templateUrl:'employee.component.html'
})
export class EmployeeComponent
implements
OnInit,
OnChanges,
DoCheck,
AfterContentInit,
AfterContentChecked,
AfterViewInit,
AfterViewChecked,
OnDestroy{

 @Input() employee:any;

 constructor(){
   console.log("Constructor");
 }

 ngOnChanges(changes:SimpleChanges){
   console.log("ngOnChanges");
 }

 ngOnInit(){
   console.log("ngOnInit");
 }

 ngDoCheck(){
   console.log("ngDoCheck");
 }

 ngAfterContentInit(){
   console.log("ngAfterContentInit");
 }

 ngAfterContentChecked(){
   console.log("ngAfterContentChecked");
 }

 ngAfterViewInit(){
   console.log("ngAfterViewInit");
 }

 ngAfterViewChecked(){
   console.log("ngAfterViewChecked");
 }

 ngOnDestroy(){
   console.log("ngOnDestroy");
 }

}

Execution Order (First Time)

Order	Lifecycle Hook	Purpose
1	Constructor	Create component and inject dependencies
2	ngOnChanges	Detect initial `@Input()` values
3	ngOnInit	Initialize component and load data
4	ngDoCheck	Perform custom change detection
5	ngAfterContentInit	Initialize projected content (`<ng-content>`)
6	ngAfterContentChecked	Check projected content
7	ngAfterViewInit	Initialize component view and child views
8	ngAfterViewChecked	Check the component view
9	ngOnDestroy	Clean up resources before destruction

Which Hook to Use?

Scenario	Recommended Hook
Inject services	`constructor()`
Load API data	`ngOnInit()`
Detect `@Input()` changes	`ngOnChanges()`
Custom change detection	`ngDoCheck()`
Work with projected content	`ngAfterContentInit()`
Access `@ViewChild` or initialize UI libraries	`ngAfterViewInit()`
Subscribe to observables	`ngOnInit()`
Unsubscribe, clear timers, close connections	`ngOnDestroy()`

Common Interview Questions

1. What is the difference between `constructor()` and `ngOnInit()`?

Constructor	ngOnInit
JavaScript/TypeScript feature	Angular lifecycle hook
Used for dependency injection	Used for component initialization
Runs before Angular initializes the component	Runs after Angular has initialized inputs
Avoid API calls here	Ideal place for API calls

2. Which hook is best for calling APIs?

Answer: ngOnInit().

3. Which hook is used for cleanup?

Answer: ngOnDestroy().

4. Which hook is used with `@ViewChild`?

Answer: ngAfterViewInit().

5. Which hook is called when an `@Input()` value changes?

Answer: ngOnChanges().

6. Which lifecycle hook is called only once after component initialization?

Answer: ngOnInit().

7. Why is `ngOnDestroy()` important?

Answer: It prevents memory leaks by unsubscribing from observables, clearing timers, removing event listeners, and closing WebSocket or SignalR connections.

Best Practices

Use constructor() only for dependency injection and simple initialization.
Place API calls and business initialization logic in ngOnInit().
Keep ngDoCheck() lightweight because it runs frequently.
Use ngAfterViewInit() when interacting with the DOM or @ViewChild.
Always clean up subscriptions and resources in ngOnDestroy().
Avoid performing expensive operations inside ngAfterViewChecked() and ngAfterContentChecked() since they are called often.

This lifecycle knowledge is frequently tested in Angular interviews and is essential for building efficient, maintainable Angular applications.

Friday, July 3, 2026

Structural Design Patterns

The 7 Structural Design Patterns with:

Definition
Problem Statement
UML Diagram
Real-world Example
Complete C# Console Application
ASP.NET Core Example
Advantages
Disadvantages
Best Practices
Common Mistakes
Interview Questions

Part 3.1 – Adapter Design Pattern

You'll learn:

What is the Adapter Pattern?
Why incompatible interfaces become a problem
Object Adapter vs Class Adapter
Adapter Pattern Structure
UML Class Diagram
Real-world Examples (Power Adapter, USB Adapter)
Complete C# Console Application
ASP.NET Core Example
Advantages and Disadvantages
Best Practices
Common Mistakes
Interview Questions

Part 3.2 – Bridge Design Pattern

Topics:

What is the Bridge Pattern?
Abstraction vs Implementation
Composition over Inheritance
UML Diagram
Complete C# Example
ASP.NET Core Example
Real-world Examples
Advantages
Disadvantages
Interview Questions

Part 3.3 – Composite Design Pattern

Topics:

Tree Structures
Parent–Child Relationships
Composite vs Leaf Objects
UML Diagram
File System Example
Organization Hierarchy Example
C# Console Application
ASP.NET Core Example
Advantages
Disadvantages
Interview Questions

Part 3.4 – Decorator Design Pattern

Topics:

Dynamic Behavior Addition
Wrapper Objects
Decorator vs Inheritance
Coffee Shop Example
Middleware Analogy in ASP.NET Core
Complete C# Example
UML Diagram
Advantages
Disadvantages
Best Practices
Interview Questions

Part 3.5 – Facade Design Pattern

Topics:

Simplifying Complex Systems
Wrapper APIs
Banking System Example
Home Theater Example
ASP.NET Core Integration
UML Diagram
C# Console Example
Advantages
Disadvantages
Interview Questions

Part 3.6 – Flyweight Design Pattern

Topics:

Memory Optimization
Shared Objects
Intrinsic vs Extrinsic State
Text Editor Example
Game Development Example
UML Diagram
Complete C# Example
ASP.NET Core Example
Advantages
Disadvantages
Performance Considerations
Interview Questions

Part 3.7 – Proxy Design Pattern

Topics:

Virtual Proxy
Remote Proxy
Protection Proxy
Smart Proxy
Lazy Loading
Entity Framework Core Proxy
C# Example
ASP.NET Core Example
UML Diagram
Advantages
Disadvantages
Interview Questions

What You'll Learn in Part 3

By the end of the Structural Design Patterns section, you'll understand:

How to connect incompatible interfaces using Adapter.
How to separate abstraction from implementation with Bridge.
How to represent hierarchical tree structures using Composite.
How to add functionality dynamically using Decorator.
How to simplify complex subsystems with Facade.
How to optimize memory usage using Flyweight.
How to control access to objects using Proxy.

You'll also see how these patterns are applied in modern C# and ASP.NET Core applications, including Dependency Injection, middleware pipelines, Entity Framework Core, cloud integrations, and enterprise architectures.

We'll begin Part 3.1 – Adapter Design Pattern, covering:

What is the Adapter Pattern?
Why incompatible interfaces become a problem
Object Adapter vs. Class Adapter
UML Class Diagram
Complete C# Console Application
ASP.NET Core implementation
Real-world examples
Advantages and disadvantages
Best practices
Common mistakes
Interview questions

The Adapter Pattern is one of the most practical structural patterns and is widely used when integrating third-party libraries, legacy systems, external APIs, or services with incompatible interfaces. It provides a clean way to make otherwise incompatible components work together without modifying their existing code.

Part 5-Advanced Azure Architecture, High Availability, Disaster Recovery & Real-Time Scenario

Part 5 – Advanced Azure Architecture, High Availability, Disaster Recovery & Real-Time Scenario-Based Interview Questions (Q81–100)

This section focuses on advanced Azure concepts that are commonly asked in interviews for experienced professionals (5–15+ years), including Solution Architects, Azure Developers, and DevOps Engineers.

81. What is High Availability (HA) in Azure?

Answer

High Availability (HA) ensures that applications remain operational with minimal downtime, even if hardware or software components fail.

Azure Services for HA

Availability Zones
Availability Sets
Azure Load Balancer
Azure Front Door
Azure Application Gateway
Azure Kubernetes Service (AKS)
VM Scale Sets

Real-Time Example

An e-commerce website is deployed across three Availability Zones with a Load Balancer. If one zone experiences an outage, traffic is automatically routed to healthy instances in the remaining zones.

82. What is Disaster Recovery (DR)?

Answer

Disaster Recovery (DR) is the strategy and process for restoring applications and data after major failures such as regional outages, natural disasters, or cyberattacks.

Azure Services Used

Azure Site Recovery (ASR)
Azure Backup
Geo-Redundant Storage (GRS)
Azure SQL Geo-Replication

Real-Time Example

A financial application replicates its virtual machines from East US to Central US using Azure Site Recovery. If the primary region fails, operations continue from the secondary region.

83. Explain RTO and RPO.

Answer

RTO (Recovery Time Objective)

The maximum acceptable time to restore a service after a failure.

Example: Restore the application within 2 hours.

RPO (Recovery Point Objective)

The maximum acceptable amount of data loss measured in time.

Example: Lose no more than 15 minutes of data.

Interview Tip

RTO = Time to recover.
RPO = Amount of data that can be lost.

84. How do you optimize Azure costs?

Answer

Best Practices

Right-size Virtual Machines.
Use Azure Advisor recommendations.
Enable Auto Scaling.
Purchase Reserved Instances for predictable workloads.
Use Spot VMs for interruptible workloads.
Shut down development VMs outside business hours.
Move infrequently accessed data to Cool or Archive storage tiers.
Delete unused resources and orphaned disks.
Use Azure Cost Management and Budgets.

Real-Time Example

A company reduced its monthly Azure bill by 35% by resizing underutilized VMs and enabling auto-shutdown for development environments.

85. What is Azure Advisor?

Answer

Azure Advisor analyzes Azure resources and provides personalized recommendations.

Recommendation Categories

Cost Optimization
Performance
Security
Reliability
Operational Excellence

Example

Azure Advisor recommends resizing an underutilized D8 VM to a D4 VM, reducing monthly costs.

86. What is Azure Well-Architected Framework?

Answer

The Azure Well-Architected Framework provides best practices for designing secure, reliable, efficient, and cost-effective cloud solutions.

Five Pillars

Reliability
Security
Cost Optimization
Operational Excellence
Performance Efficiency

Real-Time Example

An architect reviews an application's design against these pillars before production deployment.

87. How would you migrate an on-premises application to Azure?

Answer

Typical Migration Steps

Assess the existing environment using Azure Migrate.
Identify application dependencies.
Choose a migration strategy (Rehost, Refactor, Rearchitect, Rebuild, Replace).
Migrate databases.
Test the application.
Perform a production cutover.
Monitor and optimize after migration.

Real-Time Example

A legacy ASP.NET application hosted on IIS is migrated to Azure App Service, while SQL Server is migrated to Azure SQL Managed Instance.

88. What are the "6 Rs" of Cloud Migration?

Answer

Strategy	Description
Rehost	Lift and Shift with minimal changes
Replatform	Minor optimizations during migration
Refactor	Modify code to use cloud-native services
Rearchitect	Redesign the application architecture
Rebuild	Rewrite the application from scratch
Replace	Move to a SaaS solution

Interview Tip

Be prepared to explain when each strategy is appropriate.

89. How do you secure Azure resources?

Answer

Security Best Practices

Enable Multi-Factor Authentication (MFA).
Use Microsoft Entra ID with RBAC.
Store secrets in Azure Key Vault.
Enable Microsoft Defender for Cloud.
Apply Network Security Groups (NSGs).
Use Private Endpoints for PaaS services.
Enable encryption at rest and in transit.
Patch operating systems regularly.
Use Azure Policy for governance.

Real-Time Example

A production environment uses Managed Identities to access Key Vault, eliminating hardcoded credentials.

90. What is Microsoft Defender for Cloud?

Answer

Microsoft Defender for Cloud is a cloud security posture management (CSPM) and cloud workload protection platform (CWPP).

Features

Secure Score
Vulnerability Assessment
Regulatory Compliance
Threat Detection
Security Recommendations
Just-in-Time (JIT) VM Access

Example

Defender for Cloud identifies an exposed management port and recommends restricting access through NSGs and JIT.

91. Explain a three-tier Azure architecture.

Answer

Architecture

Internet
    │
Azure Front Door
    │
Application Gateway (WAF)
    │
Web Tier (App Service / VM Scale Sets)
    │
Application Tier (AKS / App Service)
    │
Database Tier (Azure SQL)
    │
Azure Storage

Benefits

Scalability
High Availability
Security
Easy maintenance
Separation of concerns

92. How would you design a highly available application in Azure?

Answer

Design

Deploy resources across Availability Zones.
Use Azure Front Door for global routing.
Use Application Gateway with WAF.
Configure VM Scale Sets or AKS for auto scaling.
Enable Azure SQL active geo-replication.
Store data in Geo-Redundant Storage (GRS).
Implement Azure Backup and Azure Site Recovery.

Real-Time Example

A global retail platform continues serving users during a regional outage by failing over traffic to a secondary Azure region.

93. How do you troubleshoot a slow Azure application?

Answer

Investigation Steps

Review Azure Monitor metrics.
Analyze Application Insights telemetry.
Check CPU, memory, and disk utilization.
Review dependency calls (database, APIs).
Inspect Log Analytics queries.
Analyze network latency.
Review scaling configuration.
Examine SQL query performance and execution plans.
Check storage latency.

Interview Tip

Always start with monitoring data before making infrastructure changes.

94. A VM is unreachable. How would you troubleshoot it?

Answer

Troubleshooting Steps

Verify the VM is running.
Check Network Security Group (NSG) rules.
Confirm the public IP address and DNS settings.
Validate Azure Load Balancer health probes.
Review route tables.
Use Azure Serial Console if enabled.
Check boot diagnostics.
Review operating system firewall settings.
Restart or redeploy the VM if necessary.

95. Your application suddenly receives 10x more traffic. What would you do?

Answer

Solution

Enable Auto Scaling.
Scale out App Service or VM Scale Sets.
Use Azure Front Door for global traffic distribution.
Enable Azure CDN for static content.
Add Azure Cache for Redis to reduce database load.
Optimize database queries.
Monitor metrics and logs during the event.

Real-Time Example

An online ticket booking platform automatically scales during a major concert ticket release.

96. Explain a secure CI/CD pipeline.

Answer

Best Practices

Store secrets in Azure Key Vault.
Scan source code for vulnerabilities.
Perform dependency and container image scanning.
Run automated unit and integration tests.
Require approvals before production deployment.
Enforce branch protection and pull request reviews.
Use Managed Identities where possible.
Monitor deployments and enable rollback strategies.

97. What Azure services would you choose for a microservices application?

Answer

Requirement	Azure Service
Container Orchestration	Azure Kubernetes Service (AKS)
API Management	Azure API Management
Secrets Management	Azure Key Vault
Messaging	Azure Service Bus
Monitoring	Azure Monitor & Application Insights
Container Images	Azure Container Registry
Identity	Microsoft Entra ID
Database	Azure SQL Database or Azure Cosmos DB

Real-Time Example

A food delivery application uses AKS for microservices, Service Bus for asynchronous messaging, and API Management as the gateway for client applications.

98. Explain an enterprise Azure architecture.

Answer

Users
   │
Azure Front Door
   │
Application Gateway (WAF)
   │
API Management
   │
AKS / App Service
   │
Azure Service Bus
   │
Azure SQL Database
Azure Cosmos DB
Azure Storage
   │
Key Vault
   │
Azure Monitor
Application Insights
Log Analytics

Key Characteristics

High Availability
Security
Scalability
Centralized Monitoring
Disaster Recovery
API Governance

99. What Azure interview questions are commonly asked for experienced professionals?

Answer

Interviewers often ask:

Explain a production Azure architecture you designed.
How do you implement High Availability and Disaster Recovery?
How do you optimize Azure costs?
How do you secure cloud applications?
Explain Azure networking in detail.
Describe your CI/CD pipeline.
How do you monitor production applications?
How do you migrate on-premises workloads to Azure?
How do you troubleshoot production issues?
Explain a microservices architecture on Azure.

Interview Tip: Answer with real project experience whenever possible, using the STAR method (Situation, Task, Action, Result).

100. What are the top Azure interview tips?

Answer

Before the Interview

Review Azure Fundamentals and core services.
Understand networking, security, storage, and compute.
Practice Azure Portal, Azure CLI, and PowerShell.
Learn CI/CD with Azure DevOps or GitHub Actions.
Be familiar with Bicep or Terraform.
Review monitoring and troubleshooting tools.
Study architecture diagrams and migration strategies.
Practice scenario-based questions.

During the Interview

Clarify requirements before answering.
Explain trade-offs between services.
Discuss scalability, security, and cost considerations.
Use real-world examples from your experience.
Structure answers logically and avoid unnecessary jargon.

Final Summary

Across all five parts of this guide, you have covered:

Azure Fundamentals
Compute Services
Storage Services
Networking
Security
Identity Management
Containers and Kubernetes
DevOps and CI/CD
Monitoring and Observability
Infrastructure as Code
High Availability and Disaster Recovery
Cost Optimization
Cloud Migration
Enterprise Architecture
Real-world Scenario-Based Interview Questions

This collection provides a strong foundation for Azure interviews across roles such as Azure Administrator, Azure Developer, DevOps Engineer, and Azure Solution Architect, from beginner to experienced levels.

Part 2 -Azure Compute Storage

Part 3 -Azure Networking Security

Part 4- Azure DevOps Monitoring Containers

Part -4 Azure DevOps, Monitoring, Containers & Infrastructure as Code

Part 4 – Azure DevOps, Monitoring, Containers & Infrastructure as Code (Q61–80)

This section covers Azure DevOps, CI/CD, monitoring, logging, containers, Infrastructure as Code (IaC), and automation—topics that are frequently asked in Azure Developer, DevOps Engineer, and Solution Architect interviews.

61. What is Azure DevOps?

Answer

Azure DevOps is Microsoft's cloud-based platform that provides tools to plan, develop, build, test, deploy, and monitor software applications.

Azure DevOps Services

Azure Repos
Azure Pipelines
Azure Boards
Azure Test Plans
Azure Artifacts

Benefits

CI/CD Automation
Source Code Management
Agile Project Management
Automated Testing
Release Management

Real-Time Example

A development team uses Azure Repos for Git, Azure Pipelines for CI/CD, and Azure Boards to track user stories and bugs.

62. What are Azure Repos?

Answer

Azure Repos is a source code management service that supports:

Git repositories
Team Foundation Version Control (TFVC)

Features

Branching
Pull Requests
Code Reviews
Branch Policies
Version Control

Real-Time Example

Developers create feature branches, submit pull requests, and merge approved code into the main branch.

63. What is Azure Pipelines?

Answer

Azure Pipelines is a CI/CD service used to automatically build, test, and deploy applications.

Pipeline Stages

Build
Test
Package
Deploy
Monitor

Supports

.NET
Java
Node.js
Python
Angular
React
Docker
Kubernetes

Example Flow

Developer Pushes Code
        │
Azure Repos
        │
Azure Pipeline
        │
Build
        │
Run Unit Tests
        │
Create Artifact
        │
Deploy to Dev
        │
Deploy to QA
        │
Deploy to Production

64. What is Continuous Integration (CI)?

Answer

Continuous Integration (CI) is the practice of automatically building and testing code whenever developers commit changes to the repository.

Benefits

Early bug detection
Faster feedback
Automated testing
Improved code quality

Real-Time Example

A developer pushes code to GitHub or Azure Repos. Azure Pipelines automatically compiles the application and executes unit tests.

65. What is Continuous Deployment (CD)?

Answer

Continuous Deployment (CD) automatically deploys validated code to testing or production environments after a successful CI process.

Benefits

Faster releases
Reduced manual effort
Lower deployment risk
Consistent deployments

Example Workflow

Code Commit
      │
CI Build
      │
Automated Testing
      │
Deployment Approval (Optional)
      │
Production Deployment

66. What is Azure Container Registry (ACR)?

Answer

Azure Container Registry (ACR) is a private registry for storing Docker container images and OCI artifacts.

Features

Private image storage
Geo-replication
Image scanning integration
Role-Based Access Control (RBAC)
Azure Kubernetes Service (AKS) integration

Real-Time Example

Developers push Docker images to ACR, and AKS pulls the latest image during deployment.

67. What is Docker?

Answer

Docker is a containerization platform that packages an application along with its dependencies into a portable container.

Advantages

Consistent environments
Lightweight
Fast startup
Easy deployment

Real-Time Example

A .NET Web API is packaged into a Docker image and deployed to Azure Kubernetes Service (AKS).

68. Docker vs Virtual Machine

Docker Container	Virtual Machine
Shares host OS kernel	Includes full guest OS
Lightweight	Heavier
Starts in seconds	Takes minutes to boot
Efficient resource usage	Higher resource usage
Best for microservices	Best for legacy workloads

69. What is Kubernetes?

Answer

Kubernetes is an open-source container orchestration platform used to deploy, manage, and scale containerized applications.

Features

Auto Scaling
Self-Healing
Rolling Updates
Load Balancing
Service Discovery

Real-Time Example

An e-commerce platform runs multiple microservices in Kubernetes. If a container fails, Kubernetes automatically restarts it.

70. Explain the relationship between Docker, ACR, and AKS.

Answer

The deployment flow is:

Developer
    │
Build Docker Image
    │
Push Image
    │
Azure Container Registry (ACR)
    │
Azure Kubernetes Service (AKS)
    │
Deploy Pods
    │
Application Available to Users

Interview Tip

Remember the sequence:
Docker → ACR → AKS

71. What is Azure Monitor?

Answer

Azure Monitor is a comprehensive monitoring service that collects, analyzes, and visualizes telemetry from Azure resources and applications.

Monitors

Virtual Machines
Azure SQL
AKS
Storage Accounts
Networking
Applications

Features

Metrics
Logs
Alerts
Dashboards
Workbooks

Real-Time Example

An operations team monitors CPU usage on production VMs and receives alerts when usage exceeds 80%.

72. What is Application Insights?

Answer

Application Insights is an Azure Monitor feature that tracks application performance and usage.

Tracks

Request rates
Response times
Exceptions
Dependencies
User sessions
Availability tests

Real-Time Example

Developers identify a slow API endpoint by analyzing request duration and dependency calls in Application Insights.

73. What is Log Analytics?

Answer

Log Analytics is a service for querying and analyzing logs collected by Azure Monitor using the Kusto Query Language (KQL).

Data Sources

Azure resources
Virtual Machines
Containers
Security logs
Custom application logs

Example KQL Query

AzureActivity
| where ActivityStatus == "Failed"
| order by TimeGenerated desc

74. What are Azure Alerts?

Answer

Azure Alerts notify administrators when predefined conditions are met.

Alert Types

Metric Alerts
Log Alerts
Activity Log Alerts
Service Health Alerts

Example

Send an email and trigger an Azure Function when CPU utilization exceeds 90% for five minutes.

75. What is Infrastructure as Code (IaC)?

Answer

Infrastructure as Code (IaC) is the practice of provisioning and managing infrastructure through code rather than manual configuration.

Benefits

Automation
Repeatability
Version Control
Consistency
Faster deployments

Popular IaC Tools

ARM Templates
Bicep
Terraform

76. What is Bicep?

Answer

Bicep is Microsoft's domain-specific language for deploying Azure resources. It simplifies ARM template authoring with a cleaner syntax.

Advantages

Easier to read and maintain than JSON
Native Azure support
Modular design
Strong validation

Example

resource storage 'Microsoft.Storage/storageAccounts@2023-01-01' = {
  name: 'demostorage123'
  location: resourceGroup().location
  sku: {
    name: 'Standard_LRS'
  }
  kind: 'StorageV2'
}

77. What is Terraform?

Answer

Terraform is an open-source Infrastructure as Code tool by HashiCorp that provisions infrastructure across multiple cloud providers.

Features

Multi-cloud support
State management
Modular architecture
Declarative configuration

Real-Time Example

A company provisions Azure, AWS, and Google Cloud resources using a single Terraform codebase.

78. ARM Template vs Bicep vs Terraform

Feature	ARM Template	Bicep	Terraform
Language	JSON	DSL	HCL
Readability	Moderate	High	High
Azure Native	Yes	Yes	Yes
Multi-Cloud	No	No	Yes
State File	No	No	Yes
Learning Curve	Moderate	Easy	Moderate

Interview Tip: For Azure-only environments, Bicep is often preferred due to its simplicity and native integration. Terraform is a strong choice for multi-cloud deployments.

79. How would you design a CI/CD pipeline for an ASP.NET Core application?

Answer

Typical Workflow

Developer
    │
Push Code to Azure Repos
    │
Azure Pipeline Triggered
    │
Restore NuGet Packages
    │
Build Application
    │
Run Unit Tests
    │
Publish Build Artifact
    │
Deploy to Development
    │
Run Integration Tests
    │
Approval Gate
    │
Deploy to Production
    │
Application Insights Monitoring

Best Practices

Store secrets in Azure Key Vault.
Use environment-specific configuration files.
Add automated testing before deployment.
Implement approval gates for production.
Use deployment slots to minimize downtime.

80. Explain a real-world Azure DevOps architecture.

Answer

Scenario

A company develops a microservices-based e-commerce application using .NET, Angular, Docker, and AKS.

Architecture

Developer
      │
Azure Repos
      │
Azure Pipelines
      │
Build & Test
      │
Docker Image Build
      │
Azure Container Registry (ACR)
      │
Azure Kubernetes Service (AKS)
      │
Azure Monitor
      │
Application Insights
      │
Log Analytics
      │
Alerts & Dashboards

Deployment Flow

Developers commit code to Azure Repos.
Azure Pipelines automatically builds and tests the application.
A Docker image is created and pushed to Azure Container Registry (ACR).
Azure Kubernetes Service (AKS) pulls the latest image and performs a rolling update.
Azure Monitor tracks infrastructure health.
Application Insights collects application telemetry such as requests, exceptions, and response times.
Log Analytics aggregates logs for troubleshooting and root cause analysis.
Azure Alerts notify the operations team if thresholds are exceeded.

Best Practices

Use Git branching strategies (e.g., GitFlow or trunk-based development).
Automate builds, tests, and deployments.
Use Infrastructure as Code (Bicep or Terraform).
Store secrets in Azure Key Vault instead of source code.
Implement rolling or blue-green deployments to reduce downtime.
Enable monitoring and alerting for all production workloads.
Secure pipelines with least-privilege access and service connections.

Part 4 Summary

In this section, you learned about:

Azure DevOps
Azure Repos
Azure Pipelines
Continuous Integration (CI)
Continuous Deployment (CD)
Azure Container Registry (ACR)
Docker
Kubernetes
Azure Monitor
Application Insights
Log Analytics
Azure Alerts
Infrastructure as Code (IaC)
Bicep
Terraform
Real-world CI/CD architecture
Real-world Azure DevOps architecture

Next: Part 5 (Q81–100)

The final section will cover advanced Azure interview questions, including:

Azure Solution Architecture
High Availability (HA)
Disaster Recovery (DR)
Cost Optimization
Security Best Practices
Performance Optimization
Azure Well-Architected Framework
Migration Strategies
Real-world troubleshooting scenarios
Frequently asked scenario-based interview questions for 5–15 years of experience

Pages

Monday, July 6, 2026

How to Configure DevOps Pipelines: A Real-Time CI/CD Example

What Is a DevOps Pipeline?

Why Pipelines Matter in Real Projects

Real-Time Scenario: Web App CI/CD Pipeline

Designing the Pipeline Stages

1. Build and Test (CI)

2. Deploy (CD)

Example Pipeline Configuration (YAML Style)

How This Works in Real Time

Best Practices for DevOps Pipelines

Saturday, July 4, 2026

Angular Directives – Complete Guide with All Examples

Types of Directives

1. Component Directive

2. Structural Directives

A. *ngIf

Example

Real-Time Example

ngIf with else

B. *ngFor

Real-Time Example

ngFor with Index

ngFor with first and last

C. ngSwitch

Real-Time Example

3. Attribute Directives

ngClass

Real-Time Example

ngStyle

Real-Time Example

Built-in Attribute Directive Example

Custom Attribute Directive

Custom Permission Directive

Real-Time Example

Custom Disable Directive

Real-Time Employee Portal

Structural vs Attribute Directives

Interview Questions

1. What is a directive in Angular?

2. How many types of directives are there?

3. What is the difference between *ngIf and [hidden]?

4. What is the difference between ngClass and ngStyle?

5. Can we create custom directives?

Creating a Custom Component in Angular with a Real-Time Example

Real-Time Scenario

Step 1: Create the Component

Step 2: Employee Card Component

employee-card.component.ts

Explanation

Step 3: Employee Card HTML

employee-card.component.html

Step 4: CSS

employee-card.component.css

Step 5: Use the Component in App Component

app.component.ts

app.component.html

Output

Data Flow

Real-Time Banking Example

Parent Component

Parent HTML

Output

Advantages of Custom Components

Interview Questions

1. What is a custom component in Angular?

2. How do you create a component?

3. How do you pass data from a parent component to a child component?

4. How do you display a custom component?

5. Why are custom components important?

Custom Components, Directives, and Pipes in Angular – Complete Guide with Real-Time Examples

Angular applications are built using three fundamental building blocks:

1. Custom Components

What is a Component?

Real-Time Banking Example

Create Component

Employee Component

Real-Time Example

Parent to Child Communication

3. What is the difference between `*ngIf` and `[hidden]`?

4. What is the difference between `ngClass` and `ngStyle`?

1. What is the difference between `constructor()` and `ngOnInit()`?

4. Which hook is used with `@ViewChild`?

5. Which hook is called when an `@Input()` value changes?