UI Source

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...

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 u...

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 ...

What is AOT compilation What are the advantages of AOT Every Angular application consists of components and templates which the browser cannot understand. Therefore, all the Angular applications need to be compiled first before running inside the browser.  Angular provides two types of compilation:  JIT(Just-in-Time) compilation AOT(Ahead-of-Time) compilation In JIT compilation, the application compiles inside the browser during runtime.  Whereas in the AOT compilation, the application compiles during the build time.  The advantages of using AOT compilation are:  Since the application compiles before running inside the browser, the browser loads the executable code and renders the application immediately, which leads to  faster rendering . In AOT compilation, the compiler sends the external HTML and CSS files along with the application, eliminating separate AJAX requests for those source files, which leads to  fewer ajax requests . Developers can detec...

How does an Angular application work Every Angular app consists of a file named  angular.json . This file will contain all the configurations of the app. While building the app, the builder looks at this file to find the entry point of the application. Following is an image of the angular.json file:  "build" : { "builder" : "@angular-devkit/build-angular:browser" , "options" : { "outputPath" : "dist/angular-starter" , "index" : "src/index.html" , "main" : "src/main.ts" , "polyfills" : "src/polyfills.ts" , "tsConfig" : "tsconfig.app.json" , "aot" : false , "assets" : [ "src/favicon.ico" , "src/assets" ], "styles" : [ "./...