Angular v17 Basics You Should Know Before a Job Interview (Especially If It's Tomorrow)

That’s right. Let’s say you applied for a front-end Angular developer position, and the interview is tomorrow — where do you even start?

Don’t panic. Here’s a quick overview of the key Angular concepts and tools you’re likely to be asked about.

What Is Angular?

Angular is a front-end framework built in TypeScript, mostly used for creating single-page applications (SPAs).

Common tools and libraries you’ll often see in Angular projects:

Angular CLI – Command-line interface to generate components, serve projects, and scaffold code fast.
RxJS – A library for handling async data streams; core to how Angular deals with events and API calls.
NgRx – Redux-style state management library built on RxJS, useful for large-scale applications.
Angular Material – A component library following Material Design, with prebuilt UI elements.
Tailwind CSS – Utility-first CSS framework that pairs well with Angular for fast styling.
NG Bootstrap – Angular-friendly Bootstrap components (no jQuery needed).
Angular Animations – Module for handling UI animations using Angular syntax.
Angular Forms – Includes both reactive and template-driven form handling approaches. Reactive forms are preferred for complex use cases.

Core Angular Concepts

Here are the essentials you should know:

Components – The building blocks of your UI. Each component controls a section of the page.
Decorators – Functions that attach metadata to classes, properties, methods, or parameters (e.g. @Component, @Injectable). Used by Angular to understand how to process and instantiate them.
Directives – Modify the DOM or behavior of elements (e.g. *ngIf, *ngFor).
Modules – Group components, directives, services, etc. into cohesive blocks.
Routing – Enables navigation between different pages or views in your app.
Guards – Control access to routes based on logic like authentication or permissions.
Services – Share logic or data across components using Angular’s built-in dependency injection (DI) system — a key part of how Angular apps are structured.
Pipes – Transform values in templates (e.g., date formatting or uppercase text).

Angular apps are built from many types of building blocks. Components handle the UI, but they depend on services for logic, decorators for metadata, guards for route protection, and so on. It’s all about modularity and clearly splitting responsibilities.

State Management

State management is how your app handles and shares data across different parts — like user info, a shopping cart, or app settings.

Why does it matter?

Imagine two components:

One shows a list of products.
Another shows how many items are in the cart.

If a user adds something to the cart, both components need to “know” that the data has changed. This is where state management comes in.

In large Angular apps, state management becomes crucial to avoid bugs, duplication, or messy data flow.

RxJS (Reactive Extensions for JavaScript)

Angular includes RxJS to manage async operations and data streams — it’s the foundation for things like HTTP calls, form changes, and simple state sharing.

You can use RxJS in services to share data between components.

For example:

You create a service with a BehaviorSubject.
One component updates the value.
Another component automatically reacts to that change.

This approach works well for small to medium-sized apps.

NgRx

NgRx is a separate library (inspired by Redux) that builds on top of RxJS and gives you a more structured way to manage global state.

It’s helpful when:

Your app is large or has many components sharing the same data.
You want a predictable and testable way to update state.

NgRx uses actions, reducers, and a centralized store to track changes — like having a big control panel for your app’s entire state.

You can see it this way:

RxJS is like passing notes between friends in a group chat — quick, direct, and works fine when there aren’t too many people.
NgRx is like using a shared whiteboard in a classroom — everyone writes updates in one place, and everyone sees the changes clearly and in order.

Use RxJS for simpler communication and data flows. Use NgRx when your app grows and you need better organization.

Karma and Jasmine: Your New Best Friends

These are the two built-in testing tools Angular uses by default:

Karma – A test runner that watches your files and re-runs your tests automatically when something changes.
Jasmine – A testing framework that helps you write expectations for your code. It compares the actual result to the expected one and throws an error if they don’t match.

Together, they give you a solid out-of-the-box setup for writing and running unit tests.

How to Start a New Angular Project

Assuming you’ve already installed Node.js, here’s how to get up and running quickly:

Install Angular CLI globally

npm install -g @angular/cli
Create a new project

ng new my-angular-app
During setup (in Angular 17+), it may ask:
- Do you want a zoneless application? (This refers to using or skipping zone.js, which Angular traditionally used to detect changes.)
- Do you want to enable Angular routing?
- What stylesheet format do you want?
Change into your project directory and start the dev server

ng serve
Open the localhost URL in your browser — you’ll see the Angular welcome screen!

How Angular Stands Out

If you’re coming from a general JavaScript background, you probably know about Promises — they handle a single asynchronous result. Once a promise resolves or fails, it’s done. They’re also not cancelable.

Observables, on the other hand (used by Angular via RxJS), are more powerful:

They handle multiple values over time
They won’t start until you subscribe to them
They can be canceled

Think of a promise as ordering food from a waiter — you get one meal, and that’s it.

An observable is more like a magazine subscription — you keep getting new issues until you unsubscribe.

Angular uses observables by default for things like HTTP requests, forms, and more.

Dependency Injection (DI)

Angular makes it easy to share logic across your app by injecting services into components or other services. This promotes clean, reusable code and is central to how Angular apps are structured.

Forms

Angular offers two types:

Template-driven forms: quick to set up using ngModel in the HTML.
Reactive forms: defined in the component, offering more control and testability. Most devs prefer reactive forms for complex apps.

Routing with Guards

Angular’s router supports protecting routes using guards like CanActivate. You can check for things like authentication before allowing access to certain pages.

Lazy Loading

Improves performance by loading feature modules only when needed. This keeps the initial bundle smaller and speeds up load times.

One Last Thing

Angular might seem overwhelming at first, but once you understand the core concepts — components, observables, modules, and routing — you’ll be able to handle most interview questions confidently.

And hey, if the interview is tomorrow? Just focus on these building blocks, brush up your TypeScript a bit, and remember: you probably know more than you think.

Good luck!

A. Moreno @amoreno