UI Source

Promise vs Observable difference Promise It resolves or reject a single value and can handle a single value async task at a time. A promise once resolved the async value it completes, can no longer be used.its just one-time use and here it falls short. Not cancellable No rxjs support for operators.  read more about promise Observable ability to emit multiple asynchronous values. Used to handle the stream of events or values. Consider you have an array of numerous tasks or values, and you want every time value is inserted into this it should be handled automatically. Anytime you push a value into this array, all of its subscribers will receive the latest value automatically. Observables are useful for observing input changes, repeated interval, broadcast values to all child components, web socket push notifications

promise  A promise is used to handle the asynchronous result of an operation. JavaScript is designed to not wait for an asynchronous block of code to completely execute before other synchronous parts of the code can run. For instance, when making API requests to servers, we have no idea if these servers are offline or online, or how long it takes to process the server request. in the short term, we can say Promises are used to handle asynchronous Http requests. Promise execution is asynchronous, which means that it's executed, but the program won't wait until it's finished to continue with the rest of the code. Promises have three states: fulfilled : Action related to the promise succeeded rejected : Action related to the promise failed pending : Promise is still pending i.e not fulfilled or rejected yet Creating a Promise The Promise object is created using the  new  keyword and contains the  promise ; this is an executor function which has a  resolve  and a  reject  callb

Data-binding means communication between the TypeScript code and template.  Using Data Binding, the user can able to manipulate the elements. Therefore, whenever some variable has been changed, that particular change must be reflected in the Document Object Model Data-binding can be either one-way or two-way. Angular provides various types of data binding - 1.String Interpolation 2.Property Binding 3.Event Binding 4.Two-way binding String Interpolation String Interpolation is a one-way data-binding which is used to output the data from a TypeScript code to HTML template (view). It uses the template expression in double curly braces{{}} to display the data from the component to the view. app.component.ts app.component.html <h3><title name: {{title}}</h3> in the above example, the output will be  title name: String  Interpolation Data Binding Property Binding Property binding is also a one-way data binding, where we bind a property of a DOM element to a field which is a pr

Directives are instructions in the  DOM  (Document Object Model). It specifies how to place our business logic in Angular. The directive is markers on a DOM element that tell Angular to attach a specified behavior to that DOM element or even transform the DOM element and its children. Mostly directives in Angular starts with ng- where  ng  stands for  Angular,  and it extends the HTML. A directive modifies the DOM by changing the appearance, behavior, or layout of DOM elements. Directives just like Component are one of the core building blocks in the Angular framework to build applications.  There are three kinds of directives: 1. Component Directives 2. Structural Directives 3. Attribute Directives Component Directives Components are the most common of the directives. It contains the details of how the component should be processed, instantiated, and used at runtime. The component comprises meta-data. Structural Directives  These directives are used to manipulate and change the struct

Component in Angular A component is a basic building block of UI in an Angular. it controls on UI of application.  it is easily reusable. or we can say Components are defined using the @component decorator. A component has a selector, template, style, and other properties, using which it specifies the metadata required to process the component. How to create Component we have angular CLI command of creating an angular component ng generate component component-name in short form, we can write it as ng g c component-name once you hit this command below file will add inside the component directory HTML: it defines user interface which contains HTML/View of Application, directive & data binding CSS: it has the style of the respective component TS: (it is typescript file, we have to import component class inside TS file, it has class, decorator) Spec: The spec files are unit tests for your source files. The convention for Angular applications is to have a .spec.ts file