5 questions foundWhat is a component in Angular and what are its main parts?
Beginner A component is a reusable piece of the user interface, combining a TypeScript class that holds data and logic, an HTML template that describes what appears on screen, and optionally its own CSS styles. Together these three pieces define one self contained building block of your app.
@Component({
selector: 'app-greeting',
template: `<h1>Hello, {{ name }}</h1>`,
styles: [`h1 { color: blue; }`]
})
export class GreetingComponent {
name = 'Sarah';
}
Real-world example A shopping site builds a single ProductCard component and reuses it dozens of times across the homepage, each time simply passing in different product details.
Common follow-ups: What is the difference between an inline template and a separate template file?;Why must a component's selector be unique across the whole app?
Data Binding;Content Projection (ng-content)
What is Angular's template syntax used for displaying dynamic values on the page?
Beginner You use double curly braces, called interpolation, to display the value of a property directly inside your HTML template. Angular automatically keeps this displayed value in sync whenever the underlying property changes.
@Component({
selector: 'app-price',
template: `<p>Total: {{ price * quantity }}</p>`
})
export class PriceComponent {
price = 10;
quantity = 3;
}
Real-world example A shopping cart component uses interpolation to calculate and display the total price of an item directly inside the template, updating automatically whenever the quantity changes.
Common follow-ups: Can you call a function inside interpolation, not just a simple property?;What happens if the value inside interpolation is null or undefined?
Data Binding;Pipes (Built-in & Custom)
How do standalone components change the way you organize and use components in Angular?
Intermediate Standalone components declare their own dependencies, like which directives or other components they use, directly within the component itself using the imports array, removing the need to declare every component inside an NgModule. This simplifies the mental model and reduces boilerplate for many apps.
@Component({
selector: 'app-user-card',
standalone: true,
imports: [CommonModule, RouterLink],
template: `<a [routerLink]="['/profile']">View Profile</a>`
})
export class UserCardComponent {}
Real-world example A new Angular project built entirely with standalone components skips creating any NgModules at all, keeping each component's own dependencies clearly listed right where they are actually used.
Common follow-ups: Can standalone components be used together with existing NgModule based components in the same app?;Why did Angular introduce standalone components as the new default approach?
Standalone Components;NgModules & Modular Architecture
How would you conditionally show different content in a component's template?
Intermediate Newer versions of Angular provide the at if block, a built in control flow syntax that lets you show or hide content based on a condition directly in your template, replacing the older asterisk ngIf structural directive with a syntax that is closer to regular programming language conditionals.
@Component({
selector: 'app-greeting',
template: `
@if (isLoggedIn) {
<p>Welcome back</p>
} @else {
<p>Please log in</p>
}
`
})
export class GreetingComponent {
isLoggedIn = false;
}
Real-world example A website shows a personalized welcome message for signed in users and a simple login prompt for everyone else, using the new at if block syntax to control which section actually renders.
Common follow-ups: How does the new at if syntax differ in performance from the older asterisk ngIf directive?;What is the at else if syntax used for handling more than two conditions?
New Control Flow Syntax (@if @for & @switch);Directives
How do you pass data into a component from its parent using an input property?
Advanced You mark a class property with the Input decorator, or use the newer input function, letting a parent component pass a value down through an attribute in the template, which the child component can then use directly inside its own template or logic.
@Component({
selector: 'app-user-card',
template: `<p>{{ name }} is {{ age }} years old</p>`
})
export class UserCardComponent {
@Input() name!: string;
@Input() age!: number;
}
// Used by a parent as:
// <app-user-card [name]="'Alice'" [age]="30"></app-user-card>
Real-world example A parent dashboard page passes a specific user's name and age down to a reusable UserCardComponent, letting the same card component display different information for every different user.
Common follow-ups: What happens if a required input is never provided by the parent component?;How does the newer signal based input function differ from the traditional Input decorator?
Angular Signals;Data Binding