Mastering Tech Interviews
Angular Fundamentals
The Building Blocks of an Angular App
Angular organizes applications into a clear, predictable structure. Think of it like building with LEGOs. You don't start with a giant, single block of plastic. Instead, you have smaller, specialized bricks that you snap together to create something bigger. In Angular, these bricks are called components.
Components are the fundamental building blocks of Angular applications. Each component controls a small piece of the screen, called a view.
A component is a self-contained unit that includes everything it needs to function: its structure (HTML), its appearance (CSS), and its behavior (TypeScript code). A typical Angular application is a tree of these components. You might have a navigation component, a user profile component, and a list component, all working together to form a complete user interface.
Anatomy of a Component
So what does one of these component 'bricks' look like? Every component is essentially a TypeScript class. This class holds the data and the logic for that part of the UI. But to tell Angular that a plain class is actually a component, we use a decorator.
Decorator
noun
A special kind of declaration that can be attached to a class, method, or property. It adds metadata that Angular uses to understand how the element should work.
The @Component decorator is where you configure your component. You tell it what its HTML tag should be, where to find its HTML template, and where its CSS styles are located.
import { Component } from '@angular/core';
@Component({
selector: 'app-greeting', // The custom HTML tag for this component
template: `
<h1>{{ greetingMessage }}</h1>
<p>Welcome to our application!</p>
`,
styles: [`
h1 {
color: steelblue;
}
`]
})
export class GreetingComponent {
// This property holds the data for the template
greetingMessage = 'Hello, World!';
}
In this example:
selector: Tells Angular to create an instance of this component wherever it finds the<app-greeting>tag in the HTML.template: Contains the HTML for the component. Notice the{{ greetingMessage }}part? We'll get to that next.styles: An array of CSS styles that apply only to this component.GreetingComponentclass: This is where the component's logic lives. Right now, it just has one property,greetingMessage.
Connecting Logic to the View
The magic of Angular is how it connects the data in your TypeScript class to the HTML template. This is called data binding.
Interpolation is the simplest form. It lets you display a value from your component class inside the HTML. You just wrap the property name in double curly braces, like {{ greetingMessage }}. Angular will replace this with the actual string value from the greetingMessage property.
Data binding creates a live link between your component's data and what the user sees. When the data changes, the view updates automatically.
Beyond just displaying text, you can also manipulate HTML element properties using property binding. This lets you control things like whether a button is disabled or the source of an image.
You can also listen for user actions, like clicks or keyboard input, with event binding. When an event happens, you can call a method in your component's class to respond.
| Binding Type | Syntax | Description |
|---|---|---|
| Interpolation | {{ value }} | Displays a component property's value as text. |
| Property Binding | [property]="value" | Sets an HTML element's property from a component property. |
| Event Binding | (event)="handler()" | Runs a component method when a user event occurs. |
Directives, Services, and Modules
Directives are instructions you place in your HTML to add dynamic behavior. The most common ones are *ngIf and *ngFor.
*ngIfconditionally adds or removes an element from the DOM. If the expression is true, the element is shown; if false, it's removed.*ngForrepeats an element for each item in a list. It's perfect for rendering lists of data.
What about code that needs to be shared across many components, like fetching data from a server or logging user actions? That's where services come in.
A service is just a TypeScript class designed to do a specific job. Components shouldn't handle complex logic themselves; they should delegate it to services. Angular's dependency injection system handles creating and providing these services to the components that need them. A component simply asks for a service in its constructor, and Angular provides it.
Finally, all these pieces—components, directives, and services—are organized into modules. An Angular application has at least one root module, usually called AppModule, that bootstraps the application. For larger apps, you can create feature modules to group related functionality, keeping your code organized and maintainable.
Navigating Between Views
Most applications have more than one page or view. Angular's Router is what lets users navigate between them. You define routes that map a URL path, like /products or /user/42, to a specific component.
When a user clicks a link or types a URL in the browser, the Router checks its configuration and displays the component associated with that path. This happens without a full page reload, creating a fast and smooth experience characteristic of a Single-Page Application (SPA).
// A basic routing configuration
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'products', component: ProductListComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' } // Default route
];
You would then use a special directive, router-outlet, in your main HTML file. This acts as a placeholder where the Router will render the component for the current route.
In Angular, what is the primary building block of a user interface, encapsulating its template, styles, and logic?
Which property in the @Component decorator is used to define the custom HTML tag for that component?
These are the core concepts that form the foundation of any Angular application. By understanding how components, templates, services, and the router work together, you're ready to start building powerful and dynamic web apps.