kaveer's blog

Two-Way Data Binding in Angular Two-way data binding in Angular is a key concept that allows your UI (view) and your component (model) to stay in sync . It means when the user updates the input, the model gets updated automatically, and vice versa. 🔁 What is Two-Way Data Binding? Two-way data binding connects a form input element to a component variable both ways : Component → Template (displaying the value) Template → Component (updating the value) ✅ Syntax <input [(ngModel)]="username" /> The [(ngModel)] is shorthand for combining: <input [ngModel]="username" (ngModelChange)="username = $event" /> 📦 Prerequisite You must import FormsModule in your module to use ngModel . import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ FormsModule ] }) export class AppModule { } ✏️ Example Component (app.component.ts) export class AppComponent { username: string = 'AngularD...

Custom Pipes in Angular Let's look at how to create custom pipes in Angular — a powerful way to transform data your way when built-in pipes don't cut it. 🔧 When to Create a Custom Pipe? Use a custom pipe when: You want reusable transformations. Built-in pipes don't cover your use case. You want clean templates (instead of complex method calls). ✅ Steps to Create a Custom Pipe 1. Generate a Pipe Use Angular CLI: ng generate pipe myCustom This creates two files: my-custom.pipe.ts my-custom.pipe.spec.ts (for testing) 2. Basic Pipe Example: Reverse a String import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'reverse' }) export class ReversePipe implements PipeTransform { transform(value: string): string { return value.split('').reverse().join(''); } } 3. Use in Template <p>{{ 'angular' | reverse }}</p> <!-- ralu gna --> 4. Using Pipe wi...

Built-in Pipes in Angular Let's dive into Built-in Pipes in Angular — a super handy way to format data directly in your templates. Pipes transform your data's display without changing the actual value. 🛠 What is a Pipe? A Pipe takes in data as input and transforms it to a desired format. You use pipes with the | (pipe) character in templates. ✅ Common Built-in Pipes Pipe Description Example uppercase Transforms text to all uppercase 'hello' | uppercase → HELLO lowercase Transforms text to all lowercase 'HELLO' | lowercase → hello titlecase Capitalizes first letter of each word 'angular pipe' | titlecase → Angular Pipe date Formats a date today | date:'fullDate' currency Formats number as currency 123.45 | currency:'EUR' → €123...

Custom Directives in Angular Let's explore Custom Directives in Angular — one of the most powerful features when you want to encapsulate and reuse behavior across components! 🧱 What is a Custom Directive? A custom directive is a class with the @Directive() decorator that allows you to attach custom behavior to elements in the DOM. ✨ Types of Custom Directives Attribute Directive – changes appearance/behavior of elements ( highlight , auto-focus , etc.) Structural Directive – changes the DOM layout ( *ngIf , *ngFor , etc.) 🛠️ Create a Custom Attribute Directive Example Let's create a directive that highlights text when hovered. Step 1: Generate Directive ng generate directive highlight Step 2: Modify the Directive Code // highlight.directive.ts import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(private ...

Angular Attribute Directives: ngClass and ngStyle Unlike structural directives (which add/remove elements), attribute directives change the appearance or behavior of an element by modifying its attributes. 🎨 1. ngClass – Apply CSS Classes Dynamically ✅ Basic Usage: <p [ngClass]="'highlight'">This is highlighted.</p> ✅ Conditional Class: <p [ngClass]="{ 'active': isActive, 'error': hasError }"> Status Message </p> ✅ Multiple Classes Based on Array: <p [ngClass]="['base-class', dynamicClass]">Styled text</p> 🖌️ 2. ngStyle – Apply Inline Styles Dynamically ✅ Basic Usage: <p [ngStyle]="{ 'color': 'blue', 'font-weight': 'bold' }"> Styled inline text </p> ✅ Dynamic Style: <p [ngStyle]="{ 'background-color': isError ? 'red' : 'green' }"> Conditional Background </p...

Angular Structural Directives Guide Structural Directives in Angular are used to alter the DOM layout by adding or removing elements. The most common ones are *ngIf , *ngFor , and *ngSwitch . ✅ 1. *ngIf – Conditional Rendering Used to show or hide an element based on a condition. <p *ngIf="isLoggedIn">Welcome, User!</p> <p *ngIf="!isLoggedIn">Please log in.</p> Optional else clause: <ng-container *ngIf="isLoggedIn; else loginPrompt"> <p>Welcome back!</p> </ng-container> <ng-template #loginPrompt> <p>Please sign in.</p> </ng-template> 🔁 2. *ngFor – Iterating Over Lists Used to repeat an element for each item in a list. <ul> <li *ngFor="let item of items; let i = index"> {{ i + 1 }}. {{ item }} </li> </ul> You can also use other local variables like: index first last even odd <div *ngFor=...

🔹 @Input() – Passing Data from Parent to Child Use @Input() when the parent component needs to send data to its child . ✅ Example: parent.component.html <app-child [message]="parentMessage"></app-child> parent.component.ts export class ParentComponent { parentMessage = 'Hello from Parent!'; } child.component.ts import { Component, Input } from '@angular/core'; @Component({ selector: 'app-child', template: `<p>{{ message }}</p>` }) export class ChildComponent { @Input() message: string = ''; } 🔸 @Output() – Sending Data from Child to Parent Use @Output() when the child component needs to emit an event back to the parent. ✅ Example: child.component.ts import { Component, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-child', template: `<button (click)="sendMessage()">Send Message</button>` }) export class ChildCompo...

AI-Powered PR Review with Azure DevOps Overview: This guide shows you how to set up an automated AI-powered Pull Request review system using Azure OpenAI and Azure DevOps. The AI will automatically detect security vulnerabilities, performance issues, and code quality problems in your pull requests. Prerequisites Create Azure OpenAI Sign in to Azure Portal Go to https://portal.azure.com Sign in with your Azure account Create Resource Click "Create a resource" (top left) Search for "Azure OpenAI" Click "Azure OpenAI" → "Create" Create a Deployment Model Access Azure AI Foundry Portal Go to https://ai.azure.com OR from Azure Portal → Your OpenAI resource → "Explore Azure AI Foundry portal" Create/Select Project Create new project: AI-PR-Review Select your Azure OpenAI resource Navigate to Deployments Left sidebar → "Deployments...

Functions and Methods in C# 🚀 Functions (or methods ) in C# encapsulate logic and allow code reuse . They take input parameters , process logic, and return results . 1️⃣ Defining and Calling Methods A method in C# consists of: Access modifier Return type Method name Parameters (optional) Method body 🔹 Basic Method Syntax: [AccessModifier] ReturnType MethodName(ParameterList) { // Method body return value; // (if applicable) } Example: class Program { static void SayHello() // No parameters, no return type { Console.WriteLine("Hello, World!"); } static void Main() { SayHello(); // Method call } } 2️⃣ Methods with Parameters 🔹 Passing Arguments Parameters allow input values to be passed to a method. static void Greet(string name) { Console.WriteLine($"Hello, {name}!"); } static void Main...

Control Structures in C# 🚀 Control structures help control the flow of execution in a program. C# provides conditional statements ( if-else , switch ) and loops ( for , while , do-while ) to handle different scenarios. 1️⃣ Conditional Statements 🔹 if-else Statement The if-else statement executes code based on conditions . Syntax: if (condition) { // Code runs if condition is true } else if (anotherCondition) { // Code runs if anotherCondition is true } else { // Code runs if none of the above conditions are true } Example: int age = 20; if (age >= 18) { Console.WriteLine("You are an adult."); } else { Console.WriteLine("You are a minor."); } ✅ Nested if-else int number = 10; if (number > 0) { if (number % 2 == 0) { Console.WriteLine("Positive Even Number"); } else { Console.WriteLine("Positive Odd Number"); } } 🔹 switch Statement The switch statemen...

Variables, Data Types, and Operators in C# 🚀 Understanding variables, data types, and operators is essential for writing C# programs. Let’s go step by step. 1️⃣ Variables in C# A variable is a named storage location that holds data. 🔹 Declaring Variables dataType variableName = value; Example: int age = 30; string name = "John"; double price = 99.99; 🔹 Variable Naming Rules ✅ Must start with a letter or underscore ( _ ) ✅ Can contain letters, digits, and underscores ✅ Case-sensitive ( myVar and MyVar are different) ✅ Cannot use C# keywords (e.g., int , class , public ) 2️⃣ Data Types in C# C# has value types (stored directly in memory) and reference types (stored as references). 🔹 Common Value Types Data Type Size Example Description int 4 bytes int x = 100; Stores whole numbers double 8 bytes double pi = 3.14; Stores decimal numbers float 4 bytes float price = 9.99f; Smaller decimal precision char 2 bytes char grade...

Setting Up Your C# Development Environment 🚀 Setting Up Your C# Development Environment If you’re ready to dive into C# and .NET development , the first step is setting up a proper environment. This includes installing the .NET SDK , choosing an IDE , and configuring essential tools. 1️⃣ Install the .NET SDK The .NET SDK provides everything you need to build, run, and publish .NET applications. ✅ Download & Install .NET SDK Visit the official .NET download page: https://dotnet.microsoft.com/download Download the latest .NET SDK (LTS version recommended). Run the installer and follow the instructions. ✅ Verify Installation dotnet --version If installed correctly, you’ll see the installed .NET version . 2️⃣ Choose an IDE (Integrated Development Environment) You need an IDE or code editor to write ...