Component is a logical piece of code for angular application which consist of 3 things: Components: Template Class Metadata. A custom element extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. Custom Component: 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. Binding: Types of Binding: 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. Interpolation or String Interpolation {{ }} - In Property binding, value flows from a component’s property into the target elements property. Property binding [] - The Eventbinding feature lets you listen to certain events such as mouse movements, keystrokes, clicks, etc. Event binding (click)="event()" 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. Two-way Binding [(ngModel)]="abc" 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. @Input: 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. @Output: 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. @ViewChild: Decorators are functions that are invoked with a prefixed @symbol. Those provides additional metadata about the class. Decorators: , e.g. @Component and @NgModule Class decorators , e.g. @Input and @Output Property decorators for properties inside classes , e.g. @HostListener Method decorators for methods inside classes , e.g. @Inject Parameter decorators for parameters inside class constructors Angular Directive is basically a class with a @Directive decorator. which add behaviour to the html DOM element Directives: These form the main class having details of how the component should be processed, instantiated and used at runtime. Component Directives: A structure directive basically deals with manipulating the dom elements. Structural directives have a * sign before the directive. For example, *ngIf and *ngFor Structural Directives: Attribute directives deal with changing the look and behaviour of the dom element. You can create your own directives as shown below. Attribute Directives: 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. Service: is a design pattern in which a class requests dependencies from external sources rather than creating them. Dependency injection or DI: Benefits if DI More Reusable Code More Testable Code More Readable Code 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. observable: 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. Pipe: |
