Angular Basics

What is Angular?

Angular is a popular open-source web application framework developed by Google. It is used to build single-page applications (SPAs) and dynamic web apps using TypeScript. Angular follows the component-based architecture and provides powerful tools for dependency injection, routing, forms handling, and more, allowing developers to create scalable and maintainable applications.

What is the difference between Angular and AngularJS?

The key differences between Angular and AngularJS are:

• Language: AngularJS uses JavaScript, while Angular (starting from version 2) uses TypeScript, which is a superset of JavaScript.
• Architecture: Angular is based on a component-based architecture, whereas AngularJS uses the MVC (Model-View-Controller) architecture.
• Performance: Angular is faster than AngularJS because it uses improved change detection strategies and a more optimized rendering engine.
• Two-way Data Binding: Both frameworks support two-way data binding, but Angular uses unidirectional data flow by default, whereas AngularJS heavily relies on two-way binding.

What is a component in Angular?

A component in Angular is a building block of the application. It is a class that controls a view, and it encapsulates the template (HTML), logic (TypeScript), and styles (CSS) for that particular part of the application. Components communicate with each other using inputs and outputs and are the core of any Angular application.

Example of a basic component:

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

In this example, ExampleComponent defines the behavior and data for the app-example component.

What are Angular modules?

Modules in Angular are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. An Angular app is defined by at least one module, known as the root module, which bootstraps the application.

Modules can declare components, directives, and pipes, and can also import other modules and services. The @NgModule decorator is used to define a module.

Example of a module:

@NgModule({
  declarations: [
    AppComponent,
    ExampleComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

In this example, the root module declares components and imports other modules, such as BrowserModule and FormsModule.

What is the purpose of the NgModule decorator?

The @NgModule decorator is used to define an Angular module. It specifies the components, directives, pipes, and services that belong to the module, along with the external modules that are required by the module. The @NgModule decorator is essential in organizing an Angular application into cohesive blocks of functionality.

Example of the @NgModule decorator:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In this example, the @NgModule decorator defines the root module for an Angular app, declaring the root component and imported modules.

What is Angular CLI, and how do you use it?

Angular CLI (Command Line Interface) is a tool that helps developers create, build, and maintain Angular applications. It automates many common tasks such as generating components, services, and modules, building the app, running development servers, and more.

To install Angular CLI, run:

npm install -g @angular/cli

Once installed, you can create a new Angular project by running:

ng new my-angular-app

Some common CLI commands:

• ng serve: Runs the development server to preview the app locally.
• ng generate component [component-name]: Generates a new component.
• ng build: Builds the application for production.

What is data binding in Angular?

Data binding in Angular is the mechanism that allows components to communicate with the DOM and vice versa. There are four types of data binding:

• Interpolation: Bind data from the component to the template using {{ }}.
• Property Binding: Bind a property in the template to a property in the component using square brackets [ ].
• Event Binding: Bind a DOM event to a component method using parentheses ( ).
• Two-way Binding: Combine property and event binding to synchronize the data between the component and the view using [(ngModel)].

What is interpolation in Angular?

Interpolation in Angular is used to bind data from the component class to the HTML template. It uses the double curly braces syntax {{ }} to display the value of a component property or expression in the template.

Example of interpolation:

export class ExampleComponent {
    title = 'Angular Basics';
}

<h1>{{ title }}</h1>

In this example, the value of the title property is interpolated and displayed inside the h1 tag.

What is property binding in Angular?

Property binding in Angular allows you to set the value of an HTML property dynamically based on a component property. It uses square brackets [ ] to bind the component property to the HTML element property.

Example of property binding:

export class ExampleComponent {
    imageUrl = 'https://example.com/image.jpg';
}

<img [src]="imageUrl" />

In this example, the src attribute of the img element is bound to the imageUrl property in the component.

What is event binding in Angular?

Event binding in Angular is used to listen to DOM events such as clicks, key presses, and form submissions. It uses parentheses ( ) to bind a DOM event to a method in the component.

Example of event binding:

export class ExampleComponent {
    handleClick() {
        console.log('Button clicked');
    }
}

<button (click)="handleClick()">Click me</button>

In this example, the click event is bound to the handleClick method in the component, which is called when the button is clicked.

What is two-way data binding in Angular?

Two-way data binding in Angular allows for automatic synchronization of data between the component and the view. It uses the [(ngModel)] directive to bind the form controls in the template to properties in the component, enabling updates in both directions.

Example of two-way data binding:

export class ExampleComponent {
    name = '';
}

<input [(ngModel)]="name" />
<p>Hello, {{ name }}!</p>

In this example, the name property in the component is bound to the input field, and any changes to the input field automatically update the component property, and vice versa.

What is dependency injection in Angular?

Dependency Injection (DI) in Angular is a design pattern in which a class receives its dependencies from an external source rather than creating them internally. Angular's DI system provides a way to inject services and other objects into components, services, and other Angular elements, promoting loose coupling and testability.

Example of dependency injection:

@Injectable({
  providedIn: 'root',
})
export class ExampleService {
  logMessage() {
    console.log('Hello from ExampleService');
  }
}

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  constructor(private exampleService: ExampleService) {}

  ngOnInit() {
    this.exampleService.logMessage();
  }
}

In this example, the ExampleService is injected into the ExampleComponent using Angular's DI system, and its method is called inside the component's lifecycle hook.