# Built-in

### [Built-in attribute directives](https://angular.dev/guide/directives#built-in-attribute-directives) <a href="#built-in-attribute-directives" id="built-in-attribute-directives"></a>

Attribute directives listen to and modify the behavior of other HTML elements, attributes, properties, and components.

The most common attribute directives are as follows:

| Common directives                                                                               | Details                                            |
| ----------------------------------------------------------------------------------------------- | -------------------------------------------------- |
| [**NgClass**](https://angular.dev/guide/directives#adding-and-removing-classes-with-ngclass)    | Adds and removes a set of CSS classes.             |
| [NgStyle](https://angular.dev/guide/directives#setting-inline-styles-with-ngstyle)              | Adds and removes a set of HTML styles.             |
| [NgModel](https://angular.dev/guide/directives#displaying-and-updating-properties-with-ngmodel) | Adds two-way data binding to an HTML form element. |

### NgClass

#### 1. **Using `ngClass` with a Simple Condition**

Suppose you have a component and you want to toggle a CSS class based on a boolean condition.

**HTML:**

```html
<div [ngClass]="{ 'highlight': isHighlighted }">
  This div is highlighted based on the condition.
</div>
```

**Component (TypeScript):**

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

@Component({
  selector: 'app-highlight-example',
  templateUrl: './highlight-example.component.html',
  styleUrls: ['./highlight-example.component.css']
})
export class HighlightExampleComponent {
  isHighlighted: boolean = true; // Change to false to see the difference
}
```

**CSS:**

```css
.highlight {
  background-color: yellow;
}
```

**Result:**

If `isHighlighted` is `true`, the div will have a yellow background due to the `highlight` class being applied:

```html
<div class="highlight">
  This div is highlighted based on the condition.
</div>
```

If `isHighlighted` is `false`, the div will have no special styling applied and will appear as default.

#### 2. **Using `ngClass` with Multiple Conditions**

You can apply multiple CSS classes based on different conditions.

**HTML:**

```html
<div [ngClass]="{
    'highlight': isHighlighted,
    'bold': isBold,
    'italic': isItalic
}">
  This div's classes are dynamically applied.
</div>
```

**Component (TypeScript):**

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

@Component({
  selector: 'app-multi-condition-example',
  templateUrl: './multi-condition-example.component.html',
  styleUrls: ['./multi-condition-example.component.css']
})
export class MultiConditionExampleComponent {
  isHighlighted: boolean = true;
  isBold: boolean = false;
  isItalic: boolean = true;
}
```

**CSS:**

```css
.highlight {
  background-color: yellow;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}
```

**Result:**

The div will have a yellow background (due to `highlight`), and italic text (due to `italic`). It will not be bold because `isBold` is `false`:

```html
<div class="highlight italic">
  This div's classes are dynamically applied.
</div>
```

#### 3. **Using `ngClass` with an Array of Classes**

If you want to apply a list of classes based on a condition, you can use an array.

**HTML:**

```html
<div [ngClass]="getClasses()">
  This div's classes are applied from an array.
</div>
```

**Component (TypeScript):**

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

@Component({
  selector: 'app-array-class-example',
  templateUrl: './array-class-example.component.html',
  styleUrls: ['./array-class-example.component.css']
})
export class ArrayClassExampleComponent {
  isHighlighted: boolean = true;
  isBold: boolean = false;

  getClasses() {
    return {
      'highlight': this.isHighlighted,
      'bold': this.isBold
    };
  }
}
```

**CSS:**

```css
.highlight {
  background-color: yellow;
}

.bold {
  font-weight: bold;
}
```

**Result:**

The div will have a yellow background due to `highlight` being `true`. It will not be bold because `isBold` is `false`:

```html
<div class="highlight">
  This div's classes are applied from an array.
</div>
```

4\. **Using `ngClass` with an Object**

You can apply CSS classes based on an object defined in the component.

**HTML:**

```html
<div [ngClass]="classObject">
  This div's classes are applied from an object.
</div>
```

**Component (TypeScript):**

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

@Component({
  selector: 'app-object-class-example',
  templateUrl: './object-class-example.component.html',
  styleUrls: ['./object-class-example.component.css']
})
export class ObjectClassExampleComponent {
  isHighlighted: boolean = true;
  isBold: boolean = false;

  classObject = {
    'highlight': this.isHighlighted,
    'bold': this.isBold
  };
}
```

**CSS:**

```css
.highlight {
  background-color: yellow;
}

.bold {
  font-weight: bold;
}
```

**Result:**

The div will have a yellow background due to `highlight` being `true`. It will not be bold because `isBold` is `false`:

```html
<div class="highlight">
  This div's classes are applied from an object.
</div>
```

#### 5. **Combining `ngClass` with `ngStyle`**

You can combine `ngClass` with `ngStyle` to apply both CSS classes and dynamic styles.

**HTML:**

```html
<div [ngClass]="{ 'highlight': isHighlighted }" [ngStyle]="{ 'font-size': fontSize }">
  This div's classes and styles are dynamically applied.
</div>
```

**Component (TypeScript):**

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

@Component({
  selector: 'app-class-style-example',
  templateUrl: './class-style-example.component.html',
  styleUrls: ['./class-style-example.component.css']
})
export class ClassStyleExampleComponent {
  isHighlighted: boolean = true;
  fontSize: string = '20px'; // Change font size if needed
}
```

**CSS:**

```css
.highlight {
  background-color: yellow;
}
```

**Result:**

The div will have a yellow background due to `highlight` being `true` and will have a font size of `20px`:

```html
<div class="highlight" style="font-size: 20px;">
  This div's classes and styles are dynamically applied.
</div>
```

#### Summary

* **`ngClass`** is a powerful Angular directive for dynamically applying CSS classes based on conditions.
* **Usage options** include: objects with conditions, arrays of classes, and methods returning class objects.
* **Combining with `ngStyle`** allows for dynamic styling along with class application.

### NgStyle

**Scenario:**

Let's say you have a component where you want to dynamically change the background color, font size, and text color of a `div` based on certain conditions or user input.

**1. Component TypeScript:**

Create a component that defines the dynamic styles.

**TypeScript (Component):**

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

@Component({
  selector: 'app-style-example',
  templateUrl: './style-example.component.html',
  styleUrls: ['./style-example.component.css']
})
export class StyleExampleComponent {
  // Define variables for dynamic styling
  isHighlighted: boolean = true;
  fontSize: string = '20px';
  backgroundColor: string = 'lightblue';
  textColor: string = 'darkblue';

  // Method to return styles as an object
  getDynamicStyles() {
    return {
      'background-color': this.backgroundColor,
      'font-size': this.fontSize,
      'color': this.textColor
    };
  }
}
```

**2. Component HTML:**

Use `ngStyle` to apply dynamic styles to the `div`.

**HTML:**

```html
htmlCopy code<div [ngStyle]="getDynamicStyles()">
  This div's styles are dynamically applied based on component properties.
</div>

<!-- Buttons to change the styles dynamically -->
<button (click)="isHighlighted = !isHighlighted">Toggle Highlight</button>
<button (click)="fontSize = '30px'">Increase Font Size</button>
<button (click)="fontSize = '15px'">Decrease Font Size</button>
<button (click)="backgroundColor = 'lightgreen'">Change Background Color</button>
<button (click)="textColor = 'red'">Change Text Color</button>
```

**3. Component CSS (Optional):**

You may have some CSS styles if needed, but in this case, they are not strictly necessary.

**CSS:**

```css
/* style-example.component.css */
/* No additional styles needed for this example */
```

#### **Result:**

* The `div` will have its background color, font size, and text color dynamically set according to the values defined in the component.
* Clicking the buttons will update the properties (`fontSize`, `backgroundColor`, `textColor`) and, in turn, update the inline styles of the `div` accordingly.

**Rendered HTML:**

Initially, the `div` will look like this:

```html
<div style="background-color: lightblue; font-size: 20px; color: darkblue;">
  This div's styles are dynamically applied based on component properties.
</div>
```

**After Interactions:**

* Clicking "Toggle Highlight" will toggle the `isHighlighted` flag (though it's not directly used here, you could incorporate it in the style changes).
* Clicking "Increase Font Size" will set the `fontSize` to `30px`.
* Clicking "Decrease Font Size" will set the `fontSize` to `15px`.
* Clicking "Change Background Color" will change the `backgroundColor` to `lightgreen`.
* Clicking "Change Text Color" will change the `textColor` to `red`.

As a result of these interactions, the styles applied to the `div` will dynamically update based on the properties and methods defined in the component.

**Example after button clicks:**

```html
<div style="background-color: lightgreen; font-size: 30px; color: red;">
  This div's styles are dynamically applied based on component properties.
</div>
```

#### Summary

* **`ngStyle`** is used to apply dynamic inline styles to HTML elements based on component properties or methods.
* **Dynamic Styles** can be adjusted interactively or based on any logic within your component, providing a flexible way to manage inline styles.

### NgModel

**Scenario:**

Let's create a component where you use `ngModel` to bind an input field to a component property. We will also include a button to update the component property, and this change will automatically reflect in the input field.

**1. Component TypeScript:**

Define the properties and methods for binding and updating in the component.

**TypeScript (Component):**

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

@Component({
  selector: 'app-ngmodel-example',
  templateUrl: './ngmodel-example.component.html',
  styleUrls: ['./ngmodel-example.component.css']
})
export class NgModelExampleComponent {
  // Define a property to bind to
  userName: string = 'John Doe';

  // Method to update the userName
  updateName(newName: string) {
    this.userName = newName;
  }
}
```

**2. Component HTML:**

Use `ngModel` to bind an input field to the `userName` property. Include a button to update the `userName`.

**HTML:**

```html
htmlCopy code<!-- Input field bound to userName with ngModel -->
<input [(ngModel)]="userName" placeholder="Enter your name" />

<!-- Display the userName below the input -->
<p>Your name is: {{ userName }}</p>

<!-- Button to update the userName property -->
<button (click)="updateName('Alice')">Change Name to Alice</button>
<button (click)="updateName('Bob')">Change Name to Bob</button>
```

**3. Component CSS (Optional):**

You may include some CSS for styling, but it’s not essential for this example.

**CSS:**

```css
cssCopy code/* ngmodel-example.component.css */
input {
  margin: 10px;
  padding: 5px;
  font-size: 16px;
}

p {
  font-size: 18px;
  color: #333;
}

button {
  margin: 5px;
  padding: 10px;
  font-size: 16px;
}
```

#### **Result:**

* **Initial State:** The input field will be pre-filled with the value `'John Doe'`, and the paragraph below will display `'Your name is: John Doe'`.

**Rendered HTML:**

Initially:

```html
htmlCopy code<input value="John Doe" placeholder="Enter your name" />
<p>Your name is: John Doe</p>
<button>Change Name to Alice</button>
<button>Change Name to Bob</button>
```

* **User Interaction:** Typing in the input field will immediately update the `userName` property in the component and vice versa.
* **Button Clicks:** Clicking "Change Name to Alice" or "Change Name to Bob" will update the `userName` property and automatically reflect the changes in both the input field and the paragraph.

**After Interaction:**

For example, after clicking "Change Name to Alice":

```html
<input value="Alice" placeholder="Enter your name" />
<p>Your name is: Alice</p>
<button>Change Name to Alice</button>
<button>Change Name to Bob</button>
```

#### Summary

* **`ngModel`** creates a two-way data binding between the input field and the component property.
* **Changes in the input field** automatically update the component property and vice versa.
* **User interactions** with input fields and buttons show how `ngModel` synchronizes the view and model seamlessly.
