ANGULAR UNIT –1 (QB SOL)

1) Explain the difference between structural and attribute directives,

and provide examples.

In Angular, directives are a powerful feature that allow you to extend

the behavior of HTML elements. There are two main types of
directives: structural directives and attribute directives.

**1. Structural Directives:**

Structural directives are responsible for manipulating the DOM

layout by adding, removing, or replacing elements. They alter the
structure of the HTML layout by adding or removing elements based
on conditions.

The most common structural directives in Angular are `*ngIf`,

`*ngFor`, and `*ngSwitch`.

**Examples of Structural Directives:**

- **ngIf:** Conditionally includes or removes an element based on

the evaluation of a condition.

```html
<div *ngIf="showElement">
This element will be displayed if showElement is true.
</div>
```

- **ngFor:** Renders a template for each item in a collection.

```html
<ul>
<li *ngFor="let item of items">
{{ item }}
</li>
</ul>
```

- **ngSwitch:** Renders one of several possible templates based

on the value of an expression.

```html
<div [ngSwitch]="value">
<div *ngSwitchCase="'a'">Value is 'a'</div>
<div *ngSwitchCase="'b'">Value is 'b'</div>
 <div *ngSwitchDefault>Value is neither 'a' nor 'b'</div>
</div>
```

**2. Attribute Directives:**

Attribute directives modify the behavior or appearance of an existing

element by applying changes to its attributes or properties. They do
not change the DOM layout but instead affect the element's
behavior or appearance.

Examples of attribute directives in Angular include `ngClass`,

`ngStyle`, and `ngModel`.

**Examples of Attribute Directives:**

- **ngClass:** Adds or removes CSS classes dynamically based on

certain conditions.

```html
<div [ngClass]="{ 'active': isActive, 'disabled': isDisabled }">
This div has dynamic CSS classes.
</div>
```

- **ngStyle:** Dynamically applies inline styles to an element based

on conditions.

```html
<div [ngStyle]="{ 'color': isActive ? 'green' : 'red', 'font-size.px':
fontSize }">
This div has dynamic styles.
</div>
```

- **ngModel:** Binds an input, select, or textarea element's value to

a property on the component's class.

```html
<input type="text" [(ngModel)]="name">
```

**Difference between Structural and Attribute Directives:**

- **Purpose:** Structural directives modify the DOM layout by
adding or removing elements, while attribute directives modify the
behavior or appearance of existing elements.
- **Usage:** Structural directives are prefixed with an asterisk (`*`),
while attribute directives are applied using square brackets (`[]`),
parentheses (`()`), or without any prefix.
- **Effect:** Structural directives change the structure of the DOM,
while attribute directives change the behavior or appearance of
elements without altering the DOM structure.

In summary, structural directives manipulate the DOM layout by

adding, removing, or replacing elements, while attribute directives
modify the behavior or appearance of existing elements by applying
changes to their attributes or properties.

2) How do you implement data binding in Angular?

In Angular, data binding is a powerful feature that allows you to

establish a connection between the component's data (model) and
the HTML view. There are four types of data binding supported in
Angular:

1. Interpolation (`{{}}`)
2. Property binding (`[]`)
3. Event binding (`()`)
4. Two-way binding (`[()]`)
Here's how you can implement each type of data binding:

**1. Interpolation (`{{}}`):**

Interpolation is used to display the value of a component property

within the HTML template. It's denoted by double curly braces
`{{}}`.

```html
<p>{{ message }}</p>
```

**2. Property Binding (`[]`):**

Property binding allows you to set the value of an HTML element

property based on a component property. It's denoted by square
brackets `[]`.

```html
<img [src]="imageUrl">
```
**3. Event Binding (`()`):**

Event binding allows you to listen for events emitted by HTML

elements and call a method on the component when the event
occurs. It's denoted by parentheses `()`.

```html
<button (click)="handleClick()">Click Me</button>
```

**4. Two-way Binding (`[()]`):**

Two-way binding combines property binding and event binding,

allowing you to establish a two-way communication between the
component and the HTML element. It's denoted by square brackets
with parentheses `[(ngModel)]`.

```html
<input [(ngModel)]="name">
```

To use two-way binding, you need to import `FormsModule` from

`@angular/forms` in your Angular module.
**Example Component:**

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

@Component({
selector: 'app-example',
template: `
<h1>{{ title }}</h1>
<input [(ngModel)]="name" placeholder="Enter your name">
<p>Hello, {{ name }}</p>
<button (click)="changeMessage()">Change Message</button>
<p>{{ message }}</p>
`,
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
title = 'Data Binding Example';
name = '';
message = 'Initial Message';

changeMessage() {
 this.message = 'New Message';
}
}
```

In this example, we've used all four types of data binding:

- Interpolation (`{{ title }}`)

- Property binding (`[ngModel]="name"`)
- Event binding (`(click)="changeMessage()"`)
- Two-way binding (`[(ngModel)]="name"`)

These data binding techniques help create dynamic and interactive

Angular applications by establishing a seamless communication
between the component and the template.

3) Explain how to use the ngIf-else syntax in Angular?

In Angular, the `ngIf` directive is commonly used for conditionally

rendering elements in the template based on a boolean expression.
However, Angular does not have built-in support for an `ngIf-else`
syntax like some other templating engines. Instead, you can achieve
the same functionality by using a combination of `ngIf` and `ng-
template` with the `ngIf-else` structural directive pattern.
Here's how you can use the `ngIf-else` syntax in Angular:

1. **Using `ng-template`:** Angular provides the `ng-template`

element, which serves as a container for holding elements that you
want to conditionally render.

2. **Using `ngIf` with `ng-template`:** You can use the `ngIf`

directive along with `ng-template` to conditionally render different
blocks of HTML based on a boolean expression.

3. **Using `ngIf` with `else` template reference variable:** By

using the `else` template reference variable, you can define a
template that gets rendered when the `ngIf` condition evaluates to
false.

**Example:**

Suppose we have a component with a boolean property

`isLoggedIn` that indicates whether a user is logged in or not. We
want to display a welcome message if the user is logged in and a
login form if the user is not logged in.

```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: `
<div *ngIf="isLoggedIn; else loginTemplate">
<h2>Welcome, {{ username }}!</h2>
<button (click)="logout()">Logout</button>
</div>
<ng-template #loginTemplate>
<h2>Login</h2>
<input type="text" placeholder="Username"
[(ngModel)]="username">
<input type="password" placeholder="Password"
[(ngModel)]="password">
<button (click)="login()">Login</button>
</ng-template>
`
})
export class ExampleComponent {
isLoggedIn = false;
username: string = '';
password: string = '';
 login() {
// Logic for login
this.isLoggedIn = true;
}

logout() {
// Logic for logout
this.isLoggedIn = false;
this.username = '';
this.password = '';
}
}
```

In this example:

- We have a boolean property `isLoggedIn` that controls whether

the user is logged in or not.
- We use `ngIf` to conditionally render either the welcome message
or the login form based on the value of `isLoggedIn`.
- The `else` template reference variable `#loginTemplate` defines
the template to render when the `ngIf` condition evaluates to false.
- When the user clicks the "Login" button, the `login()` method is
called, which sets `isLoggedIn` to `true`, causing the welcome
message to be displayed.
- When the user clicks the "Logout" button, the `logout()` method is
called, which sets `isLoggedIn` to `false`, causing the login form
to be displayed again.

This approach allows you to effectively use `ngIf-else` syntax in

Angular templates to conditionally render different blocks of HTML
based on boolean conditions. It provides a flexible and clean way to
manage conditional rendering in your Angular components.

4) Explain in detail the various steps required to install Angular.

Installing Angular involves several steps, including installing Node.js

and npm (Node Package Manager), installing the Angular CLI
(Command Line Interface), creating a new Angular project, and
configuring dependencies. Below are the detailed steps to install
Angular:

1. **Install Node.js and npm:**

- Angular requires Node.js and npm to be installed on your system.
Node.js is a JavaScript runtime environment, and npm is the
package manager for Node.js.
- Download and install Node.js from the official website:
https://nodejs.org/
 - Follow the installation instructions for your operating system.

2. **Verify Node.js and npm Installation:**

- After installing Node.js, verify that Node.js and npm are installed
correctly by opening a terminal or command prompt and running
the following commands:
```
node -v
npm -v
```
- These commands should display the installed versions of
Node.js and npm, respectively.

3. **Install Angular CLI:**

- Angular CLI is a command-line tool that simplifies the process of
creating, building, and managing Angular projects.
- Install Angular CLI globally on your system using npm by running
the following command in your terminal or command prompt:
```
npm install -g @angular/cli
```
- This command installs Angular CLI globally, making it accessible
from any directory.
4. **Verify Angular CLI Installation:**
- After installing Angular CLI, verify that it's installed correctly by
running the following command in your terminal or command
prompt:
```
ng version
```
- This command displays the installed version of Angular CLI along
with other related dependencies.

5. **Create a New Angular Project:**

- Once Angular CLI is installed, you can create a new Angular
project by running the following command:
```
ng new my-angular-app
```
- Replace `my-angular-app` with the name of your Angular
project.
- Angular CLI will prompt you to choose various options for setting
up your project, such as routing and stylesheet format. You can
choose the options based on your requirements or accept the
default options.
6. **Navigate to the Project Directory:**
- After creating a new Angular project, navigate to the project
directory using the `cd` command:
```
cd my-angular-app
```
- Replace `my-angular-app` with the name of your Angular project
directory.

7. **Run the Angular Application:**

- Once you're inside the project directory, you can run the Angular
application using the following command:
```
ng serve
```
- This command builds the Angular application and starts a
development server, making your application available at
`http://localhost:4200/` by default.
- You can access the application in your web browser to verify that
it's running correctly.

By following these steps, you can successfully install Angular and

create a new Angular project on your system. Angular CLI simplifies
the process of setting up and managing Angular projects, allowing
you to focus on building your application.