ANGULAR: COMPONENTS, DATA BINDING, AND EVENTS - PART 1

What is a component, analyze the application component

Create a component manually

The Angular framework allows us to use a component within another component and when we do so then it is called Angular Nested Components.
The outside component is called the parent component and the inner component is called the child component.

Lifecycle hooks are a special functionality in Angular that allow us to "hook into" and run code at a specific lifecycle event of a component or directive.
As a developer, you can tap into key moments in that lifecycle by implementing one or more of the "Lifecycle Hook" interfaces, all of them available in the "@angular/core" library.
Each interface defines a single hook method, whose name is the interface name prefixed with ng (ngInterfaceName). Ex: For OnInit interface, the hook method would be ngOnInit.

Per definition, an Angular Template is a blueprint for a fragment of a user interface (UI). So, a template defines a component's view.
Its default language for templates is HTML. Templates separate the view layer from the rest of the framework so we can change the view layer without breaking the application.

Data binding is a way to synchronize the data between the typescript class and the HTML template. To pass data you can use:
- One-way data binding - used to pass data in one direction (from typescript class to template or vice-versa)
- Two-way data binding - used to pass data in two directions
- Event binding - used to handle the events raised by the user actions like button click, mouse movement, keystrokes, etc.
Text interpolation is the simplest way of passing data from the typescript class to a view. Interpolation uses the double curly braces {{ and }} as delimiters.

Angular offers multiple built-in pipes that you can use to transform your data in component templates. But, you can also create your custom pipes using the @Pipe decorator in a typescript class.
In this part you will learn how to:
- Create a custom pipe with parameters
- Configure a custom pipe
- Use multiple pipes in a single interpolation

Property binding is a one-way data binding type because it moves a value in one direction, from a component's property into a target HTML element property.
To pass a value to an HTML element property you need to encapsulate the property name in square brackets ([]). Example: <img [src]="propertyValue" />

Attribute binding, similar to property binding, allows you to set a value to an HTML attribute using square brackets [ ].
Instead of passing the attribute name to the brackets, you need to use the attr prefix.
For example, the attribute aria-label can be set using [attr.aria-label].

In Angular, you can use class and style bindings to add and remove CSS class names from an element's class attribute and to set styles dynamically.

In Angular, event binding is used to handle the events raised by the user actions like button clicks, mouse movement, keystrokes, etc.
To bind to an event, you use the Angular event binding syntax. In an HTML element, you define the event name (click, hover, drag, drop, etc.) inside the parenthesis, and on the right is the function that you want to call once the vent is triggered.
Example: <button (click)="onClickCallMe()">Click Here</button>

Template variables are used to pass data in one direction from the template to the typescript component.
In the template, you use the hash symbol, #, to declare a template variable.

The two-way data binding in Angular enables data to flow from the component to the view and the other way round.

Explore the process of building a social media app from scratch using ASP.NET Core. Learn front-end design with Tailwind CSS, backend development with ASP.NET MVC, database management with Entity Framework, and cloud deployment with Azure.