Angular :

• Angular is a platform for building web applications using TypeScript, HTML, and CSS.
• It provides tools and structures to create interactive, dynamic, and single-page applications. Angular simplifies development by offering a framework that organizes code, manages data, handles user interactions, and helps create a seamless user experience on the web.

Few notions :

Components:

• Components are the individual parts of an Angular application that encapsulate specific features or sections.
• They consist of : TypeScript code, HTML templates, and styles.

Modules

• Modules are containers that group related components, directives, pipes, and services in an Angular application. They help organize and manage the overall structure of the app.

Services:

• Services are reusable pieces of code that perform specific tasks or provide shared data and functionality across components.
• They promote code reuse and maintain a separation of concerns.

Angular CLI :

Angular CLI provides many commands for various tasks, such as generating services, pipes, modules, and more. Here some the most common used ones :

• Create a new Angular application :

  ng new my-app

• Generate a new component::

  ng generate component my-component

• Serve the application locally: :

  ng serve

• Run unit tests: :

 ng test

Angular templates :

Angular templates involves data binding and interpolation.

interpolation {{ expression }}

• Interpolation is a way to output the result of an expression in the HTML template.

<p>Welcome, {{ username }}!</p>

Property Binding [property]="expression"

• Property binding allows you to set the value of an HTML element's property to the result of an expression.

<img [src]="imageUrl" alt="Image">

Event Binding (event)="expression"

• Event binding allows you to respond to user events (e.g., clicks, mouseovers).

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

Directives :

• Directives play a crucial role in enhancing the declarative nature of Angular templates and making it easier to build dynamic and interactive web applications, Angular has several built-in directives :
• ngIf: Conditionally rendering elements.

<div *ngIf="isLoggedIn">Welcome, {{ username }}!</div>

• ngFor: Iterating over a collection to generate a list of elements.

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

• ngSwitch : Switching between multiple cases based on a condition.

<div [ngSwitch]="color">
  <div *ngSwitchCase="'red'">Red</div>
  <div *ngSwitchCase="'blue'">Blue</div>
  <div *ngSwitchDefault>Other</div>
</div>

• ngStyle : Dynamically applying styles to an element.

<div [ngStyle]="{ 'color': textColor, 'font-size': fontSize + 'px' }">Styled Text</div>

OnInit :

• The OnInit interface in Angular is used to define a lifecycle hook for a component.

• Specifically, the OnInit interface has a single method called ngOnInit(), which is a lifecycle hook that is called after the component has been initialized.

• this hook to perform any initialization logic needed for the component, such as fetching data, setting up subscriptions.

• The Component decorator is used to define the metadata for the component, including the selector, template, and style URLs.