Category: Angular 11

[quads id=RndAds] Property Binding In AngularIn this tutorial we will discuss and understand about property binding in angular 11 and we explain below points in details.What is Property Binding?How to use property Binding with an example?What is Content Security for Malicious Content?Difference Between Property Binding and InterpolationWhat is property binding?Property Binding is a one-way data-binding technique. In property binding, we bind a property of a DOM element to a field which is a defined property in our component TypeScript code. Actually, Angular internally converts string interpolation into property binding.The Property Binding in Angular Application is used to bind the values of component or model properties to the HTML element. Depending on the values, it will change the existing behavior of the HTML element.Property Binding SyntaxThe Property Binding uses the following…

[quads id=RndAds] Angular InterpolationAngular interpolation is used to display dynamic data on an HTML template (at user end). It facilitates you to make changes on component.ts file and fetch data from there to HTML template (component.html file).We can display all kinds of properties data into view e.g. string, number, date, arrays, list or map.Interpolation is used for one way data binding. Interpolation moves data in one direction from our components to HTML elements.If you want to display the read-only data on a view template (i.e. From Component to the View Template), then you can use the one-way data binding technique i.e. the Angular interpolation.The Interpolation in Angular allows you to place the component property name in the view template, enclosed in double curly braces i.e. {{propertyName}}. So, the Angular Interpolation…

[quads id=RndAds] Data Binding in Angular 11In this tutorial, Will discuss Data Binding in Angular 11 in detail. Data binding is one of the most important features provided by Angular Framework which allows communicating between the component and its view. So, at the end of this tutorial, we will discuss and understand.Web development requires data synchronization between the models and the views. The models basically contain the data values whereas views deal with what the user sees. So if you want to know how this happens in Angular, this article on Angular Data Binding to help you.What is Data Binding in Angular Application?Data Binding is the mechanism that binds the applications UI or User Interface to the models. Using Data Binding, the user will be able to manipulate the elements…

[quads id=RndAds] Nested Components in Angular 11In this tutorial we will discuss nested components in angular 11 with an example.As we already know Angular 2 is all about components. A component in Angular allows us to create a reusable UI widget. A component can be used by any other component. The point that you need to keep in mind is, putting all the features in one component is not a great idea because when the application grows it will be very difficult to maintain as well as difficult to unit test. So what you need to do here is, you need to split the large component into a number of smaller sub-components, where each subcomponent will focus on a specific task.What are Nested Components?The Angular framework allows us to use a…

[quads id=RndAds] Module in angularIn this tutorial we will discuss and understand module in angular , one of the important part of our angular application. Will be discussing asWhat is the module in angular?What is use of module?What are the different part of NgModule Decorator?How to create new module?What is module in angularAngular module is used to group an interrelated set of Angular primitives, including components, directives and pipes that are closely related and meant to be used together.In Angular, a module is a mechanism to group components, directives, pipes and services that are related, in such a way that can be combined with other modules to create an application.In other words, Angular modules are classes. In a class, we can define public or private methods. The public methods are…

[quads id=RndAds] Template and TemplateUrl in Angular 11In this tutorial we will discuss template and templateurl properties of the Component decorator.As we have already discussed in our previous video that @Component decorator is a function that accepts one object and this object has many properties. In this video, will discuss two important properties i.e. template and templateUrl.In angular we need to create the html or view to represent the data or accept the data from the user.  We can create the template as.Inline templateExternal TemplateUsing Inline TemplatesThe inline templates are directly specified in the component decorator using the template property. That means you need to write the required HTML inside the typescript file. All your html creating like forms, controls and javascript should be added inline it self.lets modify the…

[quads id=RndAds] Component in AngularIn this tutorial we will discuss and understand main building block of angular i.e component. We will discuss as.What is the component?What is the default component?How to create a new component?What are the building blocks of components?If you worked with Angular 1 (i.e. AngularJS) applications, then you may aware of controllers, directives, and scopes that are used to bind the data and logic to a view. But in Angular 2 or any higher versions application, the component alone performs all the tasks which are performed.What is ComponentThe Component is the main building block of an Angular Application.The component contains the data & user interaction logic that defines how the View looks and behaves. A view in Angular refers to a template (HTML).According to Team Angular, A…

[quads id=RndAds] Angular 11 Project Structure OverviewIn this tutorial we will see how angular project structure where we should add our logic, configuration etc.In our previous tutorial we created below project.I would recommend you the first file you should check out is README.md. It has some basic information on how to use CLI commands. For Example, ng new, ng generate, ng build command etc.README.md: File containing a description of our project. All the information which we would like to provide our users with before they start using our app.Root Filese2e/: e2e/ live the end-to-end tests. This is using of end-to-end tests. Its have its own ts.config file.node_modules/:Node.js creates this folder and puts all third-party modules listed in package.json inside of it. When you install any third party modules or packages…

[quads id=RndAds] Setup Angular EnvironmentIn this tutorial will discuss how to setup environment and create our first angular 11 applicationTools and Software Require to setup envTo get started with the installation, we first need to make sure we have nodejs and npm installed with the latest version. The npm package gets installed along with nodejs.Go to the nodejs official site https://nodejs.org/en/ and download as per your requirement.The latest version of Nodejs v14.16.0 is recommended for users. Users who already have nodejs greater than 14.16.0 can skip the above process. Once nodejs is installed, you can check the version of node in the command line using the command.Next tool we require VSCode, We will use Visual Studio Code IDE for working with Angular 11; you can use any IDE, i.e., Atom,…

[quads id=RndAds] Introduction to Angular 11In this tutorial we discuss what's new in angular 11 and understand below concepts.What is angularWhat is angular history or versionWhat are the advantages of angularWhat are the new features in angular 11.Angular.Angular is a platform and framework for building single-page client applications using HTML and TypeScript.A single page application is a web application or a website which provides users a very fluid, reactive and fast experience similar to a desktop application. It contains menu, buttons and blocks on a single page and when a user clicks on any of them; it dynamically rewrites the current page rather than loading entire new pages from a server. That's the reason behind its reactive fast speed.Angular 2 is complete rewrite of AngularJS and its written in TypeScript.…