Here’s a list of common Angular and AngularJS along with detailed examples to help you prepare.
Angular: Angular is a platform and framework for building single-page client applications using HTML, CSS, and JavaScript/TypeScript. It is a complete rewrite of AngularJS, developed by Google. Angular uses TypeScript, which is a superset of JavaScript, offering strong typing, interfaces, and decorators. 

• Key features of Angular:
• Two-way data binding
• Directives for extending HTML capabilities
• Dependency injection
• Routing and navigation
• Components-based architecture

Difference between AngularJS and Angular:
AngularJS  is the original version of Angular, and Angular (2 and above) is a complete rewrite.
Key differences:
Architecture: Angular uses a component-based architecture, whereas AngularJS uses a directive-based architecture.
Language: Angular uses TypeScript, while AngularJS uses JavaScript.
Performance: Angular has better performance because of the use of a new change detection mechanism (in Angular 2+).
Dependency Injection (DI): Angular's DI is more powerful and more flexible than AngularJS.
Angular Components:
In Angular, a component is a building block of the application. It controls a portion of the user interface (UI), with each component consisting of:

• HTML template (view)
• CSS styles (view styles)
• TypeScript class (logic and data)

Example:
import { Component } from '@angular/core'; @Component({ selector: 'app-hello', template: '<h1>{{ message }}</h1>', styleUrls: ['./hello.component.css'] }) export class HelloComponent { message = 'Hello, Angular!'; }
In this example, HelloComponent is an Angular component with a template displaying a message.
Data binding in Angular? Explain the types of data binding. Data binding in Angular is the mechanism to synchronize the data between the component and the view. Angular supports several types of data binding:
Interpolation: Binding data from the component to the view.

Property Binding: Bind an element property to a component property.

Event Binding: Bind an event (e.g., click) to a method in the component.

Two-Way Data Binding: Combines property and event binding.

Dependency Injection (DI) in Angular?
Dependency Injection (DI) is a design pattern used in Angular to achieve Inversion of Control (IoC). It allows services or objects to be injected into components or other services rather than being created manually inside the component.
Example:
import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class DataService { getData() { return 'Some data'; } } @Component({ selector: 'app-data', template: '<p>{{ data }}</p>', }) export class DataComponent { data: string; constructor(private dataService: DataService) { this.data = this.dataService.getData(); } }
In this example, the DataService is injected into DataComponent via DI, and its method getData() is used in the component.
Angular Routing:
Angular Routing allows you to define routes and navigate between different views or pages in a single-page application (SPA). The routing module helps handle navigation and deep linking.
Example: Define routes in app-routing.module.ts: import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {}
Use the router-outlet in app.component.html:
Navigating using the routerLink directive:
Service in Angular:
A service is a class in Angular used to handle logic that can be shared across multiple components. Services are commonly used for business logic, data fetching, and state management. Services are injected into components or other services using Angular’s Dependency Injection system.
Example:
import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class UserService { getUser() { return { name: 'John', age: 30 }; } }
In the component, the service is injected:
import { Component } from '@angular/core'; import { UserService } from './user.service'; @Component({ selector: 'app-user', template: '<p>{{ user.name }}</p>', }) export class UserComponent { user: any; constructor(private userService: UserService) { this.user = this.userService.getUser(); } }
Directives in Angular:
Directives are special markers in the DOM that allow Angular to modify the DOM structure. There are three types of directives in Angular:
Component Directives: These are the most common type of directives and include templates and logic (e.g., @Component).
Structural Directives: These modify the structure of the DOM (e.g., *ngIf, *ngFor).
Attribute Directives: These change the appearance or behavior of an element (e.g., ngClass, ngStyle).
Example: *ngIf: Conditionally display an element.
Observables in Angular:
Observables are a core part of Angular’s reactive programming. They represent a stream of asynchronous events. Angular uses RxJS (Reactive Extensions for JavaScript) for handling asynchronous operations like HTTP requests, user input, or timer events.
Example:
import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; @Component({ selector: 'app-data', template: `<div>{{ data | json }}</div>`, }) export class DataComponent implements OnInit { data: any; constructor(private http: HttpClient) {} ngOnInit() { this.http.get('https://api.example.com/data').subscribe((response) => { this.data = response; }); } }
In this example, the HttpClient service returns an Observable, and subscribe() is used to handle the response asynchronously.
Pipes in Angular:
Pipes are used to transform data in the template before it is displayed. Angular provides several built-in pipes like DatePipe, UpperCasePipe, LowerCasePipe, and CurrencyPipe. You can also create custom pipes.
Example:

In this example, birthday will be transformed into a formatted date using the DatePipe.
You can also create custom pipes:
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'reverse' }) export class ReversePipe implements PipeTransform { transform(value: string): string { return value.split('').reverse().join(''); } }
In the template:

These are some of the key Angular and AngularJS, along with practical examples. Practicing these concepts and writing code will help you to be more prepared for your Development!