Angular Intro

Simple Explanation

Angular is not just one small library. It gives a full structure for frontend development. You can create components, show data in templates, navigate between pages, validate forms, call backend APIs, and organize business logic using services.

Angular is useful when many developers work on the same application because the framework gives common patterns. Everyone follows components, services, routes, and forms instead of creating random structures.

Angular is different from AngularJS. AngularJS is the older version. Modern Angular uses components, TypeScript, standalone APIs, and a different architecture.

Syntax

Component + Template + Service + Router + Form + HTTP = Angular App

Example

@Component({
  selector: 'app-message',
  standalone: true,
  template: `<p>{{ message }}</p>`
})
export class MessageComponent {
  message = 'Angular uses components';
}

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Angular Get Started

Simple Explanation

To develop Angular applications, you need Node.js, npm, and Angular CLI. Node.js gives the runtime for development tools. npm installs packages. Angular CLI creates and manages Angular projects.

After installation, you create a project using ng new. Then you enter the project folder and run ng serve. The browser usually opens the app at http://localhost:4200.

When you save changes, the development server rebuilds and reloads the browser automatically.

Syntax

npm install -g @angular/cli
ng new app-name
cd app-name
ng serve

Example

npm install -g @angular/cli
ng version
ng new student-app
cd student-app
ng serve --open

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Angular First App

Simple Explanation

Every Angular application needs a starting point. The browser loads index.html. Angular starts from main.ts. The root component is bootstrapped and shown inside its selector.

If the root component selector is app-root, index.html should contain <app-root></app-root>. Angular finds that tag and renders the component there.

This is important because beginners often think the component directly replaces index.html. Actually, index.html is the host page, and Angular renders inside it.

Syntax

bootstrapApplication(AppComponent)

Example

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<h1>My First Angular App</h1>`
})
class AppComponent {}

bootstrapApplication(AppComponent);

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Angular Templates

Simple Explanation

A template controls what the user sees. It can display text, bind values, handle clicks, repeat lists, show conditions, use pipes, and include child components.

A template should be simple and readable. Do not put heavy business logic in HTML. Keep complex logic in the component class or in services.

Templates connect the component class to the browser page. When component data changes, Angular updates the template.

Syntax

template: `<h1>{{ title }}</h1>`
// or
templateUrl: './app.component.html'

Example

export class DashboardComponent {
  title = 'Student Dashboard';
  isLoading = false;
}

// template
// <h1>{{ title }}</h1>
// @if (isLoading) { <p>Loading...</p> }

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Interpolation

Simple Explanation

Interpolation is the easiest way to show data from the component class in HTML. It is used for headings, names, counts, labels, messages, and simple output.

When the component property changes, Angular updates the displayed text. This gives a direct connection between TypeScript data and the template.

Interpolation is for text content. For element properties like disabled or src, use property binding.

Syntax

{{ expression }}

Example

export class StudentComponent {
  studentName = 'Asha';
  course = 'Angular';
}

// template
// <h2>{{ studentName }}</h2>
// <p>Course: {{ course }}</p>

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Reference Variables

Simple Explanation

A template reference variable is created with #name. It lets the template refer to an input, form, component, or element.

For example, #emailInput can refer to an input field. You can read emailInput.value when a button is clicked.

Use reference variables for simple template access. For complex form handling, use Angular forms.

Syntax

#variableName

Example

<input #emailInput placeholder='Email'>
<button (click)='send(emailInput.value)'>Send</button>

// component
send(email: string) {
  console.log(email);
}

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Null-Safe Navigation

Simple Explanation

In real applications, data often arrives later from an API. Before the data arrives, an object may be undefined. If you try to read user.profile.name before user exists, the template can fail.

The ?. operator safely reads a property only if the previous object exists. If the object is null or undefined, Angular does not throw an error.

This is useful while loading API data.

Syntax

object?.property

Example

export class ProfileComponent {
  user?: { profile: { name: string } };
}

// template
// <p>{{ user?.profile?.name }}</p>

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Structural Directives

Simple Explanation

Structural directives control whether elements are created, repeated, or replaced. Older Angular examples use *ngIf and *ngFor. Modern Angular also supports @if and @for.

The star syntax is shorthand. Angular expands it into an ng-template behind the scenes.

Understanding structural directives helps when reading older Angular projects.

Syntax

*ngIf='condition'
*ngFor='let item of items'

Example

<div *ngIf='isLoggedIn'>Welcome</div>
<ul>
  <li *ngFor='let student of students'>{{ student.name }}</li>
</ul>

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

ngTemplateOutlet

Simple Explanation

Sometimes the same template structure must be shown in different places. ngTemplateOutlet allows you to define a template once and render it where needed.

This is useful for reusable table cells, empty states, custom list items, and layout sections.

It is an intermediate feature. Beginners should first understand components and templates.

Syntax

<ng-container *ngTemplateOutlet='templateRef'></ng-container>

Example

<ng-template #emptyState>
  <p>No records found.</p>
</ng-template>

<ng-container *ngTemplateOutlet='emptyState'></ng-container>

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Statements and $event

Simple Explanation

When a user clicks, types, submits, or changes a value, Angular can run a statement. A statement usually calls a component method.

The special variable $event contains information about the event. For an input event, it can provide the typed value through event.target.

Keep template statements simple. Put real logic in component methods.

Syntax

(event)='statement'
(input)='onInput($event)'

Example

<input (input)='onSearch($event)'>
<button (click)='save()'>Save</button>

onSearch(event: Event) {
  const value = (event.target as HTMLInputElement).value;
  console.log(value);
}

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Alias with as

Simple Explanation

Alias syntax helps avoid repeating the same async pipe or expression many times in the template.

For example, if users$ | async gives users, you can store it as users and use it inside the block.

This makes templates cleaner and easier to read.

Syntax

@if (value; as localName) {
  use localName
}

Example

@if (users$ | async; as users) {
  <p>Total users: {{ users.length }}</p>
  @for (user of users; track user.id) {
    <p>{{ user.name }}</p>
  }
}

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Pipes in Templates

Simple Explanation

Pipes are used for display formatting. They do not usually change the original data. Common examples are date formatting, currency formatting, uppercase, lowercase, percent, and json.

Use pipes when the same display transformation is needed in HTML.

Do not use pipes for backend calls or heavy business calculations.

Syntax

{{ value | pipeName }}

Example

export class InvoiceComponent {
  amount = 12500;
  today = new Date();
}

// template
// <p>{{ amount | currency:'INR' }}</p>
// <p>{{ today | date:'mediumDate' }}</p>

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Attribute Binding

Simple Explanation

Most of the time, use property binding. Attribute binding is used when you need to set real HTML attributes such as aria-label, colspan, or data-* attributes.

The syntax uses attr. before the attribute name.

Attribute binding is important for accessibility and table layouts.

Syntax

[attr.attribute-name]='value'

Example

<button [attr.aria-label]='labelText'>Save</button>
<td [attr.colspan]='columnCount'>Total</td>

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

TrackBy

Simple Explanation

When a list changes, Angular needs to know which item is which. Tracking by a unique id helps Angular reuse existing DOM elements instead of recreating everything.

Modern @for uses track. Older *ngFor uses trackBy.

This is important for large lists, tables, dashboards, and frequently updated data.

Syntax

@for (item of items; track item.id) { ... }

*ngFor='let item of items; trackBy: trackById'

Example

students = [
  { id: 1, name: 'Asha' },
  { id: 2, name: 'Ravi' }
];

// template
// @for (student of students; track student.id) {
//   <p>{{ student.name }}</p>
// }

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Angular Components

Simple Explanation

A component controls one part of the UI. It has a TypeScript class, template, styles, and metadata.

Large pages should be split into components. For example, dashboard page can have header, sidebar, card, chart, filter, and table components.

Reusable components make the application easier to maintain.

Syntax

@Component({
  selector: 'app-name',
  standalone: true,
  template: `...`
})

Example

@Component({
  selector: 'app-student-card',
  standalone: true,
  template: `<h3>{{ name }}</h3><p>{{ course }}</p>`
})
export class StudentCardComponent {
  name = 'Priya';
  course = 'Angular';
}

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Angular Data Binding

Simple Explanation

Data binding is how Angular moves information between TypeScript and HTML.

Interpolation shows text. Property binding sends component values to element properties. Event binding sends user actions back to component methods. Two-way binding keeps inputs and properties synchronized.

Data binding is one of the most important Angular skills.

Syntax

{{ value }}
[property]='value'
(event)='method()'
[(ngModel)]='value'

Example

<h2>{{ title }}</h2>
<button [disabled]='isSaving' (click)='save()'>Save</button>
<input [(ngModel)]='searchText'>

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Angular Directives

Simple Explanation

A directive is a class that changes an element or template behavior. Components are also directives with templates.

Attribute directives change appearance or behavior of an element. Structural directives add or remove DOM content.

Custom directives are useful when behavior is repeated in many places.

Syntax

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

Example

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  constructor(private el: ElementRef) {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }
}

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Angular Events

Simple Explanation

Applications are interactive. Users click buttons, type text, submit forms, and choose dropdown values.

Event binding uses parentheses. The template listens to an event and calls a component method.

Keep event expressions short. Put logic inside the TypeScript method.

Syntax

(click)='save()'
(input)='onInput($event)'
(submit)='submitForm()'

Example

count = 0;

increase() {
  this.count++;
}

// template
// <p>{{ count }}</p>
// <button (click)='increase()'>Increase</button>

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Angular Conditional

Simple Explanation

Conditional rendering is used when the UI depends on state. Examples: logged in or not, loading or loaded, error or success, admin or normal user, empty list or data list.

Modern Angular uses @if. Older Angular code may use *ngIf.

Always design all states: loading, success, empty, and error.

Syntax

@if (condition) {
  HTML
} @else {
  HTML
}

Example

@if (isLoading) {
  <p>Loading...</p>
} @else if (students.length === 0) {
  <p>No students found.</p>
} @else {
  <p>Students loaded.</p>
}

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Angular Lists

Simple Explanation

Most real apps display lists: users, students, products, orders, invoices, tickets, certificates, and projects.

Modern Angular uses @for to loop over arrays. Each item should have a tracking value, normally an id.

List templates should handle empty data and should use child components when rows/cards become complex.

Syntax

@for (item of items; track item.id) {
  HTML
}

Example

students = [
  { id: 1, name: 'Asha' },
  { id: 2, name: 'Ravi' }
];

// template
// @for (student of students; track student.id) {
//   <p>{{ student.name }}</p>
// }

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Angular Forms

Simple Explanation

Forms are used for login, signup, profile, search, checkout, feedback, ticket creation, and admin create/edit pages.

Angular has template-driven forms and reactive forms. Template-driven forms are simpler for small forms. Reactive forms are better for complex business forms.

A professional form should have validation, error messages, disabled submit state, loading state, and backend error handling.

Syntax

Template-driven: FormsModule + ngModel
Reactive: ReactiveFormsModule + FormGroup

Example

form = new FormGroup({
  email: new FormControl('', [Validators.required, Validators.email]),
  password: new FormControl('', [Validators.required])
});

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Angular Router

Simple Explanation

Routing lets users navigate between pages without reloading the full application.

A route connects a path like /dashboard to a component like DashboardComponent. RouterOutlet displays the matched route. routerLink creates navigation links.

Routing is essential for dashboards and portals.

Syntax

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent }
];

Example

export const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', loadComponent: () => import('./dashboard.component').then(m => m.DashboardComponent) },
  { path: '**', loadComponent: () => import('./not-found.component').then(m => m.NotFoundComponent) }
];

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Services and DI

Simple Explanation

A component should focus on the screen. A service should handle reusable logic such as API calls, authentication, shared state, logging, or notifications.

Dependency injection means Angular gives the service to the component instead of you manually creating it.

This makes code easier to reuse and test.

Syntax

@Injectable({ providedIn: 'root' })
export class MyService {}

private service = inject(MyService);

Example

@Injectable({ providedIn: 'root' })
export class StudentService {
  getStudents() {
    return [{ id: 1, name: 'Asha' }];
  }
}

export class StudentListComponent {
  private studentService = inject(StudentService);
  students = this.studentService.getStudents();
}

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

HTTP Client

Simple Explanation

Most real applications need backend data. HttpClient sends HTTP requests and receives responses.

GET reads data. POST creates data. PUT updates data. PATCH partially updates data. DELETE removes data.

HttpClient returns Observables, so you use subscribe, async pipe, or RxJS operators.

Syntax

provideHttpClient()
this.http.get<T>(url)

Example

export class StudentApiService {
  private http = inject(HttpClient);

  getStudents() {
    return this.http.get<Student[]>('/api/students');
  }

  createStudent(request: CreateStudentRequest) {
    return this.http.post<Student>('/api/students', request);
  }
}

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Angular Pipes

Simple Explanation

Pipes are mainly for formatting. Built-in pipes include date, currency, uppercase, lowercase, percent, decimal, and json.

Custom pipes can convert status codes into readable text or format repeated display values.

Pipes should not fetch data or contain heavy business logic.

Syntax

{{ value | pipeName }}

Example

<p>{{ amount | currency:'INR' }}</p>
<p>{{ today | date:'mediumDate' }}</p>
<p>{{ name | uppercase }}</p>

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Lifecycle Hooks

Simple Explanation

A component is created, initialized, displayed, updated, and destroyed. Hooks let you run code during these moments.

ngOnInit is commonly used for initialization. ngOnDestroy is used for cleanup. AfterViewInit is used when the component view is ready.

Good cleanup prevents memory leaks.

Syntax

ngOnInit() {}
ngOnDestroy() {}

Example

export class TimerComponent implements OnInit, OnDestroy {
  private timerId: any;

  ngOnInit() {
    this.timerId = setInterval(() => console.log('tick'), 1000);
  }

  ngOnDestroy() {
    clearInterval(this.timerId);
  }
}

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Angular Styling

Simple Explanation

Angular components can have their own styles. This keeps styles close to the component and reduces conflicts.

Global styles are useful for typography, layout, colors, and common utilities. Component styles are useful for local UI design.

Angular also supports class binding and style binding for dynamic visual changes.

Syntax

styles: [`h1 { color: red; }`]
styleUrl: './component.css'
[class.active]='isActive'
[style.width.%]='percent'

Example

@Component({
  standalone: true,
  template: `<p [class.active]='isActive'>Status</p>`,
  styles: [`.active { font-weight: bold; }`]
})
export class StatusComponent {
  isActive = true;
}

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

App Bootstrap

Simple Explanation

Modern Angular applications commonly use bootstrapApplication. This function starts the root component and applies providers such as router and HttpClient.

App configuration is where you register global providers. If routing or HttpClient is missing, the app may fail when you use routerLink or HttpClient.

Understanding bootstrap helps debug provider errors.

Syntax

bootstrapApplication(AppComponent, appConfig)

Example

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideHttpClient()]
};

bootstrapApplication(AppComponent, appConfig);

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Control Flow

Simple Explanation

Modern Angular uses @if, @for, and @switch for template control flow.

Use @if for conditions, @for for lists, and @switch for multiple cases.

Control flow makes UI dynamic. Always handle loading, empty, success, and error states in real applications.

Syntax

@if (condition) { ... }
@for (item of items; track item.id) { ... }
@switch (value) { @case ('A') { ... } }

Example

@if (isLoading) {
  <p>Loading...</p>
} @else {
  @for (student of students; track student.id) {
    <p>{{ student.name }}</p>
  }
}

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Signals

Simple Explanation

Signals are useful for local UI state and derived values. You read a signal by calling it like a function. You update it with set or update.

computed creates a derived signal. effect runs side-effect logic when signals change.

Signals are easier for many local state cases such as counters, filters, selected tabs, and loading flags.

Syntax

count = signal(0);
count();
count.set(5);
count.update(v => v + 1);
double = computed(() => count() * 2);

Example

count = signal(0);
doubleCount = computed(() => this.count() * 2);

increase() {
  this.count.update(value => value + 1);
}

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Change Detection

Simple Explanation

When component data changes, Angular checks what changed and updates the DOM.

For small apps, change detection works automatically. For large apps, performance can improve with OnPush, signals, track in lists, and avoiding heavy template functions.

Change detection is not the same as API calling. It is about keeping the UI synchronized with state.

Syntax

state changes -> Angular checks template -> DOM updates

Example

@Component({
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p>{{ user.name }}</p>`
})
export class UserCardComponent {
  @Input() user!: User;
}

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Dynamic Components

Simple Explanation

Normally components are written directly in templates. Dynamic components are chosen at runtime. This is useful for dialogs, dashboards, plugin-like layouts, tabs, widgets, and form builders.

Use dynamic components when the component type is not known until runtime.

For beginners, learn normal component composition first.

Syntax

Create or render a component based on runtime value.

Example

const componentMap = {
  chart: ChartWidgetComponent,
  table: TableWidgetComponent
};

selectedWidget = componentMap[this.widgetType];

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Advanced DI

Simple Explanation

Normal services use providedIn root. Advanced DI is needed when you want to inject configuration values, choose different implementations, or create services with factories.

InjectionToken is useful for values like API base URL or app config.

Provider scope matters. Providing a service at root gives one shared instance. Providing at component level creates separate instances.

Syntax

new InjectionToken<T>('TOKEN')
{ provide: TOKEN, useValue: value }
{ provide: Service, useClass: OtherService }

Example

export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL');

export const appConfig = {
  providers: [
    { provide: API_BASE_URL, useValue: 'https://api.example.com' }
  ]
};

baseUrl = inject(API_BASE_URL);

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Router Advanced

Simple Explanation

Large applications need more than simple routes. Child routes create nested pages. Lazy loading improves performance. Guards protect routes. Resolvers fetch required data. Query parameters store filters.

Advanced routing helps structure real business portals.

Do not overuse guards or resolvers. Keep navigation predictable.

Syntax

children: [...]
canActivate: [...]
resolve: {...}
queryParams: {...}

Example

{
  path: 'customers/:id',
  component: CustomerLayoutComponent,
  children: [
    { path: 'overview', component: CustomerOverviewComponent },
    { path: 'orders', component: CustomerOrdersComponent }
  ]
}

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

HTTP Interceptors

Simple Explanation

Interceptors are used for authentication headers, error handling, logging, retry logic, and global loading indicators.

Requests are immutable, so you clone a request before modifying it.

Keep interceptors focused. One interceptor should not handle every possible concern.

Syntax

export const interceptor: HttpInterceptorFn = (req, next) => next(req);

Example

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem('token');
  const authReq = token
    ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } })
    : req;
  return next(authReq);
};

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Forms Advanced

Simple Explanation

Business forms can be complex. They may have repeating sections, conditional fields, custom validation, backend validation, and reusable custom controls.

FormArray is used for dynamic lists like skills, addresses, phone numbers, project members, or uploaded documents.

ControlValueAccessor is used when a custom component should behave like a normal form control.

Syntax

new FormArray([])
customValidator(control)
ControlValueAccessor

Example

form = new FormGroup({
  skills: new FormArray<FormControl<string>>([])
});

addSkill() {
  this.form.controls.skills.push(new FormControl('', { nonNullable: true }));
}

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

State Management

Simple Explanation

Small state can stay inside a component. Shared state can go into a service. Complex app-wide state may use a structured store pattern.

Signals are useful for simple state in components and services. Observables are useful for async streams. State libraries can help with large complex applications.

Choose the simplest approach that solves the problem.

Syntax

component state -> service state -> app store

Example

@Injectable({ providedIn: 'root' })
export class CartService {
  private items = signal<CartItem[]>([]);
  cartItems = this.items.asReadonly();
  total = computed(() => this.items().reduce((sum, item) => sum + item.price * item.qty, 0));

  add(item: CartItem) {
    this.items.update(items => [...items, item]);
  }
}

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Animations

Simple Explanation

Animations can make UI changes easier to understand. Examples include fade in, slide, expand, collapse, route transitions, alert enter/leave, and modal opening.

Use animations carefully. Too many animations can slow the app or distract users.

Good animations are short, meaningful, and accessible.

Syntax

trigger('name', [transition(...), animate(...)])

Example

animations: [
  trigger('fade', [
    transition(':enter', [style({ opacity: 0 }), animate('200ms', style({ opacity: 1 }))]),
    transition(':leave', [animate('200ms', style({ opacity: 0 }))])
  ])
]

// template
// <div @fade>Saved successfully</div>

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Testing

Simple Explanation

Testing helps catch bugs before users see them. Component tests check UI behavior. Service tests check logic. HTTP tests check API service methods without real backend calls.

Start with simple tests: component creation, displayed title, button click, form validation, and service method.

Good tests focus on behavior, not implementation details.

Syntax

ng test
TestBed.configureTestingModule({...})

Example

describe('AppComponent', () => {
  it('should create', async () => {
    await TestBed.configureTestingModule({ imports: [AppComponent] }).compileComponents();
    const fixture = TestBed.createComponent(AppComponent);
    expect(fixture.componentInstance).toBeTruthy();
  });
});

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Security

Simple Explanation

Angular helps protect against some XSS risks by treating template values as untrusted. But developers can still create vulnerabilities.

Be careful with innerHTML and any sanitizer bypass method. Do not put secrets in frontend files. Anything in browser JavaScript can be viewed by users.

Route guards are not full security. Backend APIs must verify permissions.

Syntax

Never trust user input.
Do not store secrets in frontend.
Backend must authorize every protected action.

Example

<p>{{ userComment }}</p>

<!-- Use carefully -->
<div [innerHTML]='htmlContent'></div>

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

SSR and Hydration

Simple Explanation

Normal Angular apps render in the browser. SSR can send ready HTML from the server. This may improve first load and SEO for public pages.

Hydration allows Angular to reuse server-rendered HTML instead of recreating everything.

SSR adds complexity. Browser-only APIs like window, document, and localStorage need careful handling.

Syntax

ng add @angular/ssr
npm run build

Example

// Avoid direct browser-only code during SSR
if (typeof window !== 'undefined') {
  console.log(window.location.href);
}

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Angular Exercises

Simple Explanation

Angular is best learned by doing. Reading is not enough. After every topic, write code, break it, fix it, and explain it.

A useful exercise should have a small goal, expected output, common mistake, and explanation.

Your notebook should include definitions, syntax, examples, errors, and fixes.

Syntax

Read topic -> write code -> run -> change -> debug -> explain

Example

// Example exercise
// Create a component with name and course properties
// Display both using interpolation
// Add a button that changes the course

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Project 1: Student Management App

Simple Explanation

This project should have a dashboard, student list, student details, create/edit form, search box, and reusable student card or table.

Start with mock data in StudentService. After the UI works, replace mock data with HttpClient.

This project is good for interviews because it proves you can build a real business-style frontend.

Syntax

Dashboard + List + Details + Form + Service + Routes

Example

ng generate component features/students/student-list
ng generate component features/students/student-details
ng generate component features/students/student-form
ng generate service features/students/student

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Project 2: API CRUD Dashboard

Simple Explanation

Build a dashboard for customers, employees, products, tickets, or projects. Use HttpClient in a service. Use typed interfaces for request and response data.

Add loading states, error messages, delete confirmation, create/edit forms, and search/filter.

This project proves you understand frontend-backend integration.

Syntax

GET list
POST create
PUT/PATCH update
DELETE remove

Example

getItems() { return this.http.get<Item[]>('/api/items'); }
createItem(req: CreateItemRequest) { return this.http.post<Item>('/api/items', req); }
updateItem(id: number, req: UpdateItemRequest) { return this.http.put<Item>(`/api/items/${id}`, req); }
deleteItem(id: number) { return this.http.delete<void>(`/api/items/${id}`); }

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Project 3: Enterprise Portal

Simple Explanation

Build a login page, dashboard layout, sidebar, profile page, admin page, and one API-backed feature page.

Use AuthService, route guards, HTTP interceptor, lazy loading, reactive forms, and reusable table/card components.

This project is closest to real company frontend work.

Syntax

Login -> AuthService -> Guard -> Shell Layout -> Feature Routes -> API Services

Example

export const routes: Routes = [
  { path: 'login', component: LoginComponent },
  {
    path: '',
    component: ShellComponent,
    canActivate: [authGuard],
    children: [
      { path: 'dashboard', component: DashboardComponent },
      { path: 'admin', canActivate: [adminGuard], component: AdminComponent }
    ]
  }
];

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

Angular Interview Preparation

Simple Explanation

Do not memorize only definitions. Interviewers want to know whether you can build, explain, and debug Angular applications.

Use this answer format for every topic: what it is, why it is used, small code example, where you used it in a project, one common mistake, and how to fix it.

Use your own projects as proof.

Syntax

Definition -> Why used -> Code -> Project example -> Mistake -> Debugging

Example

Question: What is a component?

Answer:
A component is a reusable UI block in Angular. It has a TypeScript class, template, styles, and metadata. I used StudentListComponent to display student records. A common mistake is creating one huge component, and I fix it by splitting UI into child components.

Output

Try it Yourself

Example Explained

Common Mistakes

Business Use Case

Real-Time Scenario

Practice Exercises

Quick Interview Answer

Reference Links

One Page Interview Questions

How to Answer Any Angular Interview Question

One Page Angular Interview Questions and Answers

Must-Explain Real-Time Project Flow

Final Practice Before Interview

Reference Links