Angular Interview Questions

In Angular, a component is the fundamental building block for the user interface. It encapsulates the data, logic, and presentation of a part of the application's UI. Components in Angular are defined using a class decorated with the @Component decorator, which provides metadata about the component.

Key Features of an Angular Component:

1. Class:

   • Definition: A component is a TypeScript class that contains the logic and data for the component.
   • Purpose: The class handles the state and behavior of the component, such as responding to user inputs or fetching data.

2. Decorator:

   • Definition: The @Component decorator is used to annotate the class as a component and provide metadata about the component.
   • Purpose: The decorator configures the component's selector, template, and style, among other properties.
   • Example:

     @Component({
       selector: 'app-example',
       templateUrl: './example.component.html',
       styleUrls: ['./example.component.css']
     })
     export class ExampleComponent { }

3. Template:

   • Definition: The template is an HTML file or inline HTML that defines the view of the component.
   • Purpose: The template binds to the component's data and displays it to the user. It also defines how user interactions are handled.
   • Example: In the template, you can use Angular’s binding syntax to display data and handle events.

     <h1>{{ title }}</h1>
     <button (click)="onClick()">Click me</button>

4. Styles:

   • Definition: Styles can be defined inline, in a separate CSS file, or using other style formats like SCSS.
   • Purpose: They provide the visual design and layout for the component's template.
   • Example: Styles can be scoped to the component to prevent conflicts with other styles in the application.

5. Selector:

   • Definition: The selector is a CSS selector that defines how the component is used in templates.
   • Purpose: It allows the component to be embedded in other components or the root application.
   • Example: The selector app-example can be used in any template as <app-example></app-example>.

6. Lifecycle Hooks:

   • Definition: Angular provides lifecycle hooks that allow components to respond to events during their lifecycle.
   • Purpose: These hooks can be used for initialization, change detection, and cleanup.
   • Examples: Common lifecycle hooks include ngOnInit, ngOnChanges, ngOnDestroy.

Example of a Basic Component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `
    <h1>Hello, {{ name }}!</h1>
    <input [(ngModel)]="name" placeholder="Enter your name">
  `,
  styles: [`
    h1 { color: blue; }
  `]
})
export class HelloWorldComponent {
  name: string = 'World';
}

In this example:

• The HelloWorldComponent class defines a component with a name property.
• The @Component decorator specifies the selector (app-hello-world), template (inline HTML), and styles (inline CSS).
• The template binds the name property to the input field and displays it in the heading.

In Summary:
A component in Angular is a self-contained unit of the UI with its own logic, data, and presentation. It consists of a TypeScript class, an HTML template, and optional CSS styles, all configured using the @Component decorator. Components interact with each other to build complex UIs and make Angular applications modular, maintainable, and scalable.