What is Angular, and how does it differ from AngularJS?
Angular is a TypeScript-based, open-source framework by Google for building dynamic, single-page applications (SPAs). Unlike AngularJS (v1.x), which is JavaScript-based and uses controllers and scopes, Angular (2+) is a complete rewrite with a component-based architecture, TypeScript, and better performance via Ahead-of-Time (AOT) compilation.
What are components in Angular?
Components are the building blocks of an Angular app, controlling a portion of the UI. They consist of a TypeScript class (logic), an HTML template (view), and optional CSS (styles), defined using the @Component decorator.
What is a module in Angular?
A module (NgModule) groups related components, directives, pipes, and services into a cohesive unit. Every Angular app has at least one root module (e.g., AppModule), and additional feature or shared modules can be created for organization.
What is data binding in Angular?
Data binding synchronizes data between the component class and template. Angular supports:
- Interpolation: {{value}}
- Property binding: [property]=”value”
- Event binding: (event)=”handler()”
- Two-way binding: [(ngModel)]=”value”
What is the purpose of Angular CLI?
Angular CLI (Command Line Interface) is a tool to initialize, develop, scaffold, and maintain Angular applications. Commands like ng new, ng generate, and ng build streamline development.
What is Directives in Angular ?
Directives in Angular extend HTML by adding custom behavior to elements. They help manipulate the DOM and enhance reusability.
Types of Directives
- Structural Directives
- Attribute Directives
- Custom Directives
What is Structural Directives (Modify DOM)
They modify the structure of the DOM (add/remove elements)
*ngIf→ Conditionally renders elements.*ngFor→ Loops over an array.*ngSwitch→ Switch-case functionality.
Example: *ngIf and *ngFor
<p *ngIf="isLoggedIn">Welcome, User!</p>
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
What is Attribute Directives (Modify Element Behavior)
Modify the appearance or behavior of an element.
Examples: ngClass, ngStyle, customDirectives
ngClass→ Adds classes dynamically.ngStyle→ Adds styles dynamically.
<p [ngClass]="{ 'active': isActive }">Styled Text</p>
<p [ngStyle]="{ 'color': isActive ? 'green' : 'red' }">Conditional Color</p>