ANGULAR COMMANDS

-----------------------------------------------------------------------------------
------------------------------------------------------------------

ng v -> to check angular version

ng new my-first-project -> create angular project

cd my-first-project -> move to the project
ng serve -o (run the project and open it on browser)
ng serve -o --port 4200
ng(angular) g(generate) c(component) mycomponent(component name) -> create
component
sort hand -> ng g c components/homecomponent

ng generate environments (to generate environment files)

install boostrap
1.npm install bootstrap

/* styles.css or styles.scss */
2.@import 'bootstrap/dist/css/bootstrap.min.css';

use tostify

npm install ngx-toastr --save

npm install @angular/animations --save

/* styles.css or styles.scss */
@import '../node_modules/ngx-toastr/toastr.css'; /* Adjust the path based on your
project structure */

-----------------------------------------------------------------------------------
--------------------------------------------
In Angular, data binding refers to the process of connecting application data (in
the component) to the view (the template) and synchronizing
data between the view and the component. Angular provides four types of data
binding mechanisms, which allow communication between the component and the
template in different ways. These include:

(from component(.ts) to view(.html))

1. Interpolation <h1>{{ title }}</h1>
2.property binding <img [src]="imageUrl" alt="Image">

(from view(.html) to component(.ts))

3. Event Binding (event)="method($event)

Two-way Data Binding (by ngModel )

4.[(ngModel)]="property" -> [()] banana bracket

5. single

### 1. **Interpolation (One-way Data Binding: Component to View)**

- **Description**: Interpolation allows you to embed expressions and variables
from the component class into the HTML template. It is a one-way binding that
pushes data from the component to the view.
 - **Syntax**: `{{ expression }}`
- **Use Case**: It's typically used for binding strings, numbers, or other
variables in the view.
- **Example**:
```html
<h1>{{ title }}</h1>
```
Here, `title` is a property in the component, and the value of `title` will be
displayed in the `<h1>` tag in the view.

### 2. **Property Binding (One-way Data Binding: Component to View)**

- **Description**: Property binding binds a property in the component to a DOM
element’s property. It also follows one-way data flow from the component to the
view.
- **Syntax**: `[property]="expression"`
- **Use Case**: It is used to bind component class properties to DOM properties,
such as element attributes, DOM events, or other DOM element properties.
- **Example**:
```html
<img [src]="imageUrl" alt="Image">
```
In this case, `imageUrl` is a property in the component, and its value is
bound to the `src` attribute of the `img` tag.

### 3. **Event Binding (One-way Data Binding: View to Component)**

- **Description**: Event binding allows you to listen to and handle DOM events
(such as `click`, `keyup`, `change`, etc.) in the view, then trigger a method in
the component to handle the event. This follows a one-way data flow from the view
to the component.
- **Syntax**: `(event)="method($event)"`
- **Use Case**: Used when you want to trigger a component’s method in response
to a user interaction, such as clicking a button or typing in an input field.
- **Example**:
```html
<button (click)="handleClick()">Click Me</button>
```
Here, the `click` event of the button is bound to the `handleClick` method in
the component. When the button is clicked, the `handleClick()` method is called.

### 4. **Two-way Data Binding**

- **Description**: Two-way data binding allows synchronization of data between
the component and the view. Any changes in the component will reflect in the view,
and any changes made by the user in the view (e.g., through an input field) will
reflect back in the component. This combines both property binding and event
binding into a single binding.
- **Syntax**: `[(ngModel)]="property"`
- **Use Case**: It's most commonly used with form elements where you want to
allow users to modify data and reflect those changes back into the component.
- **Example**:
```html
<input [(ngModel)]="username" placeholder="Enter your name">
```
Here, the value of the `username` property in the component is bound to the
input field, and any changes to the input will update the `username` property in
real time.

### Detailed Explanation of Each Binding Type:

1. **Interpolation** is purely for displaying data in the view. It cannot change or

modify the data. If you have a dynamic title or variable you want to display,
interpolation is the simplest approach. It supports Angular expressions but is
read-only.

2. **Property Binding** is useful when you want to bind a component’s property to a

DOM element’s property. It's more powerful than interpolation because it works for
any HTML property and not just textual content.

3. **Event Binding** allows you to capture user actions in the view and respond by
executing methods in the component. You can pass `$event` to the method to get
information about the event that triggered it.

4. **Two-way Data Binding** combines property and event binding to allow seamless
synchronization of user input with the component state. It is essential for
handling forms, as it ensures that user input is always in sync with the component
model.

5 . single

### Summary of Syntax:

- **Interpolation**: `{{ expression }}`

- **Property Binding**: `[property]="expression"`
- **Event Binding**: `(event)="method($event)"`
- **Two-way Data Binding**: `[(ngModel)]="property"`

### Key Differences:

- **One-way Data Binding** (interpolation, property binding, event binding) flows

data in only one direction: either from the component to the view or from the view
to the component.
- **Two-way Data Binding** synchronizes data in both directions, making it ideal
for user inputs where both the view and component should stay in sync.

These types of data binding enable Angular applications to manage and display data
efficiently, maintaining synchronization between the user interface and the
business logic layer in a declarative manner.

-----------------------------------------------------------------------------------
---------------------------------------------------------
communication b/w the parent to child component and it's vice-versa (using the
@Input() and @Output())

Parent Component
-----------------
| |
| parentData | ---> (property binding) ---> Child Component
| | |
----------------- |
| @Input() childData
|
(Emits Event)
|
 v
EventEmitter
|
v
(event binding)
|
Parent Component (Listening) |
----------------- |
| | |
| receivedData | <--- (event emitted) <--- Child Component
| |
-----------------

Parent to Child Communication

-<app-child [childData]="parentData"></app-child>

-----------------------------------------------------------------------------------
----------------------------------------------------------

directives
- component directive
- structural directive (*ngFor="" , *ngIf="")
- attribute directive ([ngClass]="", [ngStyle]="{}")

-----------------------------------------------------------------------------------
------------------------------------------------------------
Data Binding: One-way and two-way binding

-----------------------------------------------------------------------------------
---------------------------------------------------------
control flow
@if @else @else if @switch

-----------------------------------------------------------------------------------
---------------------------------------------------------
pipe

-----------------------------------------------------------------------------------
-------------------------------------------------------
Template Form using ngModel
need to create form in .html file
steps to implement
0. need to import the FormsModule to use the ngModel
1. create the object with all the field
2. bind properties with input elements with ngModel

3. on click or submit button we get the form object

reactive form
need to create formGroup in .ts file
steps to implement
0.need to import ReactiveFormsModule
1. need to bind the formgroup in .html file

-----------------------------------------------------------------
ng s --port:8989
ng g c(component) componentname
ng g s(service) servicename
ng g p(pipe) pipename

----------------------------------------------------------------------

ng g g auth (generate guard

-----------------------------------------------------------------------------------
----------------------------------

in typescript we have to declare the variable like that

typescript => variableName: variableType =value;

java => variableType variableName = value;

`` -> template literal

`${this.apiBaseURL}endpointURL`

controller -> service -> repository

component(template+css) -> service (will contain the business logic and the
api calls )

-----------------------------------------------------------------------------------
---------------------------------------------------------------------------------

in java script we can access the dom element by using the

document.getElementById('elementId')

but in angular we can get it by using the view child(it's a decorator)

-----------------------------------------------------------------------------------
----------------------------------------------------------------------------------

when to use class or interface in angular ?

creating variable to bind form -> class
creating variable to hold array -> interface