Fundamental Concepts of Angular

Components: Component is a logical piece of code for
angular application which consist of 3 things:

1. Template
2. Class
3. Metadata.

Custom Component: A custom element extends HTML by
allowing you to define a tag whose content is created and controlled by
JavaScript code.

Binding: It allows us to define communication between
the component and view. So we can say that data binding is passed from
component to view and from view to the component.

Types of Binding:

1. Interpolation or String Interpolation {{ }} - Interpolation
   binding is used to return HTML output from TypeScript code i.e. from the components to the views. Here, the template expression is specified within double curly braces.
2. Property binding [] - In Property binding, value flows from a component’s property into the target elements property.
3. Event binding

   (click)="event()"

   The Eventbinding feature lets you listen to certain events such as mouse movements, keystrokes, clicks, etc.
4. Two-way Binding

   [(ngModel)]="abc"

   Angular allows two-way data binding that will allow your application to share data in two directions i.e. from the components to the templates and vice versa.

@Input: If we have two component and both have the parent child relationship, And we want to pass the data from parent to child on that case we can use @Input.

@Output: If we have two component and both have the parent child relationship, And we want to pass the data from the child to parent then on that case we can use @Output.

@ViewChild: We can use viewchild to access the native
element properties. ex: if i want to implement the click event whenever our
component is rendered then i have to use @ViewChild.

Decorators: Decorators are functions that are invoked with
a prefixed @symbol. Those provides additional metadata about the class.

1. Class decorators, e.g. @Component and @NgModule
2. Property decorators for properties inside classes, e.g. @Input and @Output
3. Method decorators for methods inside classes, e.g. @HostListener
4. Parameter decorators for parameters inside class constructors, e.g. @Inject

Directives: Angular Directive is basically a class with a @Directive decorator. which add behaviour to the html DOM element

Component Directives: These form the main class having details of how the component should be processed, instantiated and used at runtime.

Structural Directives: A structure directive basically deals with manipulating the dom elements. Structural directives have a * sign before the directive. For example, *ngIf and *ngFor

Attribute Directives: Attribute directives deal with changing the look and behaviour of the dom element. You can create your own directives as shown below.

Service: The main objective of a service is to
organize and share business logic, models, or data and functions with different components of an Angular application.

Dependency injection or DI: is a design pattern in which
a class requests dependencies from external sources rather than creating them.

Benefits if DI

1. More Reusable Code
2. More Testable Code
3. More Readable Code

observable: Angular uses observable which is implemented
with RxJS library for work with asynchronous events. It is a new way of pushing data in JavaScript. An observable is a Producer of multiple values which pushing values to subscribers.

Pipe: Pipe takes integers, strings, arrays, and date as input separated with

|

. It transforms the data in the format as required and displays the same in the browser.