Angular facilitates us to bind the events along with the methods. This process is known as event binding. Event binding is used with parenthesis (). Let’s see it by an example: component.html file: It will give an output that “No Server is created”. Now, we are going to bind an event with button. Add another method onCreateServer() in component.ts file which will call the event. component.html file: Output: Now, after clicking on the button, you will see that it is showing server is created. This is an example of event binding. How to use data with Event Binding? Let’s understand it by an example. Here, we will create a method named “onUpdateServerName” and add an event with it. component.html file: component.ts file: Output: You can see that when you type anything in the block, it dynamically updates it below the input. This is how we can use $event to fetch the event’s data.

In Angular, String interpolation is used to display dynamic data on 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). For example: component.ts file: Here, we have specified serverID and serverStatus with some values. Let’s use this in “component.html” file. component.html file: Output: String Interpolation vs Property Binding String Interpolation and Property binding both are used for same purpose i.e. one-way databinding. But the problem is how to know which one is best suited for your application. Here, we compare both in the terms of Similarities, Difference, Security and the output you receive. Similarities b/w String Interpolation and Property Binding String Interpolation and Property Binding doth are about one-way data binding. They both flow a value in one direction from our components to HTML elements. String Interpolation You can see in the above example, Angular takes value of the fullName property from the component and inserts it between the opening and closing <h1> element using curly braces used to specify interpolation. Property Binding In Property binding, see how Angular pulls the value from fullName property from the component and inserts it using the html property innerHtml of <h1> element. Both examples for string interpolation and property binding will provide the same result. Difference between String interpolation and Property Binding String Interpolation is a special syntax which is converted to property binding by Angular. It’s a convenient alternative to property binding. When you need to concatenate strings, you must use interpolation instead of property binding. Example: Property Binding is used when you have to set an element property to a non-string data value. Example: In the following example, we disable a button by binding to the Boolean property isDisabled. If you use interpolation instead of property binding, the button will always be disabled regardless isDisabled class property value is true or false.

Databinding is a powerful feature of Angular. Angular Databinding is used for communication. It is used to communicate between your TypeScript code (your business logic) and the other component which is shown to the users i.e. HTML layout. Databinding is necessary because when we write the code in TypeScript, it is compiled to JavaScript and the result is shown on HTML layout. Thus, to show the correct and spontaneous result to the users, a proper communication is necessary. That’s why databinding is used in Angular. There is two type of databinding: One-way databinding One way databinding is a simple one way communication where HTML template is changed when we make changes in TypeScript code. Or In one-way databinding, the value of the Model is used in the View (HTML page) but you can’t update Model from the View. Angular Interpolation / String Interpolation, Property Binding, and Event Binding are the example of one-way databinding. Two-way databinding In two-way databinding, automatic synchronization of data happens between the Model and the View. Here, change is reflected in both components. Whenever you make changes in the Model, it will be reflected in the View and when you make changes in View, it will be reflected in Model. This happens immediately and automatically, ensures that the HTML template and the TypeScript code are updated at all times.

The ngStyle attribute is used to change or style the multiple properties of Angular. You can change the value, color, and size etc. of the elements. Let’s see this by an example: component.ts file: component.html file: Here, we have chosen a method to show the method randomly “Online” and “Offline”. There is 50% chance. Output: Let’s use ngStyle to change the background color ‘red’ when the server is offline and “green” when the server is online. component.html file: Here, we have created a method getColor() to change the color dynamically. Output: If both servers are online, it will be as: This is the example of ngStyle attribute with property binding to configure it. How to apply CSS classes dynamically with ngClass In the previous article, we have seen that how to use ngStyle to make changes in an element dynamically. Here, we shall use ngClass directive to apply a CSS class to the element. It facilitates you to add or remove a CSS dynamically. Example: Let’s create a class in component.ts file which will change the color of the text yellow if the server is online. component.ts file: component.html file: Output: You can see that the ngClass directive has changed the color of the text which is online. This is an example of ngClass directive with property binding applying CSS class dynamically.

Example: component.ts file: component.html file: Output: The output will look like this. When we change the input value and click on “Add Server” button, you will see the following result: You can see in the above example that by using *ngIf directive, we can change the condition to display the output accordingly. You can check the view source of your output before and after the adding the server. You will see the difference clearly. Before adding server: After adding the server: So, you can see that how a structural directive can change the DOM. *ngIf directive with an Else condition You can also use an Else condition with *ngIf directive. It is used to display the output if *ngIf is not true. Let’s make some changes in component.html file. component.html file: Output: After clicking on “Add Server” button: You can also check its reverse case by using the negation (!) sign.

Directives are instructions in the DOM. They specify how to place your components and business logic in the Angular. Directives are js class and declared as @directive. There are 3 directives in Angular. Component Directives: Component directives are used in main class. They contain the detail of how the component should be processed, instantiated and used at runtime. Structural Directives: Structural directives start with a * sign. These directives are used to manipulate and change the structure of the DOM elements. For example, *ngIf and *ngFor. Attribute Directives: Attribute directives are used to change the look and behavior of the DOM elements. For example: ngClass, ngStyle etc. Difference between Attribute Directive and Structural Directive Attribute Directives Structural Directives Attribute directives look like a normal HTML Attribute and mainly used in databinding and event binding. Structural Directives start with a * symbol and look different. Attribute Directives affect only the element they are added to. Structural Directives affect the whole area in the DOM. How to create custom Directives? You can create your own custom directives to use in Angular components. Create a basic attribute directive You have seen the attribute directive like ngClass and ngStyle. Now, it’s time to create our own attribute directives. First, create a folder. Let’s name it “simple-style”. Then, create a file within that folder named as “simple-style.directive.ts” Now, you have to inform Angular that you have a new directive. So, you have to add SimpleStyleDirective to app.module.ts and also import it. Now, your directive is created. Let’s check it. Open app.component.html and use your created SimpleStyleDirective <p appSimpleStyle>Style me with your created SimpleStyleDirective</p>

Components are the key features of Angular. The whole application is built by using different components. The core idea behind Angular is to build components. They make your complex application into reusable parts which you can reuse very easily. How to create a new component? Open WebStorm>> Go to your project source folder>> Expand the app directory and create a new directory named “server”. Now, create the component within server directory. Right click on the server directory and create a new file named as “server.component.ts”. It is the newly created component. Components are used to build webpages in Angular but they require modules to bundle them together. Now, you have to register our new components in module. Creating component with CLI Syntax Let’s see how to create a new component by using command line. Open Command prompt and stop ng serve command if it is running on the browser. Type ng generate component server2 to create a new component named server2. You can also use a shortcut ng g c server2 to do the same task. In the above image, you can see that a new component named “server2” is created. It contains the same other components which you have seen when we create a first app.. Here, server2.component.spec.ts component is used for testing purpose. You can delete it by right click on that.

Angular 7 is a platform and framework which is used to create client applications in HTML and TypeScript. Angular 7 is written in TypeScript. Angular 7 implements core and optional functionality as a set of TypeScript libraries which you import in your app. NgModules are the basic building blocks of an Angular 7 application. They provide a compilation context for components. An Angular 7 app is defined by a set of NgModules and NgModules collect related code into functional sets. An Angular 7 app always has at least a root module which enables bootstrapping, and typically has many other feature modules. Components Components and services both are simply classes with decorators that mark their types and provide metadata which guide Angular to do things. Every Angular application always has at least one component known as root component that connects a page hierarchy with page DOM. Each component defines a class that contains application data and logic, and is associated with an HTML template that defines a view to be displayed in a target environment. Metadata of Component class: Modules Angular 7 NgModules are different from other JavaScript modules. Every Angular 7 app has a root module known as AppModule. It provides the bootstrap mechanism that launches the application. Generally, every Angular 7 app contains many functional modules. Some important features of Anngular 7 Modules: Template, Directives and Data Binding In Angular 7, a template is used to combine HTML with Angular Markup and modify HTML elements before displaying them. Template directives provide program logic, and binding markup connects your application data and the DOM. There are two types of data binding: Services and Dependency Injection In Angular 7, developers create a service class for data or logic that isn’t associated with a specific view, and they want to share across components. Dependency Injection (DI) is used to make your component classes lean and efficient. DI doesn’t fetch data from the server, validate user input, or log directly to the console; it simply renders such tasks to services. Routing In Angular 7, Router is an NgModule which provides a service that facilitates developers to define a navigation path among the different application states and view hierarchies in their app. It works in the same way as a browser’s navigation works. i.e.: How does Router work? The router maps URL-like paths to views instead of pages. Whenever a user performs an action, such as clicking a link that would load a new page in the browser, the router intercepts the browser’s behavior, and shows or hides view hierarchies. If the router finds that the current application state requires particular functionality, and the module that defines it hasn’t been loaded, the router can lazy-load the module on demand. The router interprets a link URL according to your app’s view navigation rules and data state. You can navigate to new views when the user clicks a button or selects from a drop box, or in response to some other stimulus from any source. The router logs activity in the browser’s history, so the back and forward buttons work as well. To define navigation rules, you associate navigation paths with your components. A path uses a URL-like syntax that integrates your program data, in much the same way that template syntax integrates your views with your program data. You can then apply program logic to choose which views to show or to hide, in response to user input and your own access rules.

Angular 7 is a platform and framework which is used to create client applications in HTML and TypeScript. Angular 7 is written in TypeScript. Angular 7 implements core and optional functionality as a set of TypeScript libraries which you import in your app. NgModules are the basic building blocks of an Angular 7 application. They provide a compilation context for components. An Angular 7 app is defined by a set of NgModules and NgModules collect related code into functional sets. An Angular 7 app always has at least a root module which enables bootstrapping, and typically has many other feature modules. Components Components and services both are simply classes with decorators that mark their types and provide metadata which guide Angular to do things. Every Angular application always has at least one component known as root component that connects a page hierarchy with page DOM. Each component defines a class that contains application data and logic, and is associated with an HTML template that defines a view to be displayed in a target environment. Metadata of Component class: Read more about Angular 7 component Modules Angular 7 NgModules are different from other JavaScript modules. Every Angular 7 app has a root module known as AppModule. It provides the bootstrap mechanism that launches the application. Generally, every Angular 7 app contains many functional modules. Some important features of Anngular 7 Modules: Template, Directives and Data Binding In Angular 7, a template is used to combine HTML with Angular Markup and modify HTML elements before displaying them. Template directives provide program logic, and binding markup connects your application data and the DOM. There are two types of data binding: Services and Dependency Injection In Angular 7, developers create a service class for data or logic that isn’t associated with a specific view, and they want to share across components. Dependency Injection (DI) is used to make your component classes lean and efficient. DI doesn’t fetch data from the server, validate user input, or log directly to the console; it simply renders such tasks to services. Routing In Angular 7, Router is an NgModule which provides a service that facilitates developers to define a navigation path among the different application states and view hierarchies in their app. It works in the same way as a browser’s navigation works. i.e.: How does Router work? The router maps URL-like paths to views instead of pages. Whenever a user performs an action, such as clicking a link that would load a new page in the browser, the router intercepts the browser’s behavior, and shows or hides view hierarchies. If the router finds that the current application state requires particular functionality, and the module that defines it hasn’t been loaded, the router can lazy-load the module on demand. The router interprets a link URL according to your app’s view navigation rules and data state. You can navigate to new views when the user clicks a button or selects from a drop box, or in response to some other stimulus from any source. The router logs activity in the browser’s history, so the back and forward buttons work as well. To define navigation rules, you associate navigation paths with your components. A path uses a URL-like syntax that integrates your program data, in much the same way that template syntax integrates your views with your program data. You can then apply program logic to choose which views to show or to hide, in response to user input and your own access rules.

Angular libraries are built as a solution of general problems such as presenting a unified user interface, presenting data, and allowing data entry. Developers can create general solutions for particular domains that can be adapted for re-use in different apps. These solutions can be built as Angular libraries and these libraries can be published and shared as npm packages. An Angular library is an angular project but it is different from the Angular app in the terms that it cannot run on its own. It is imported and used in the app. Usage of Angular libraries Installing libraries Libraries are published as npm packages and integrated with Angular CLI. To integrate reusable library code into an application, we have to install the package and import the provided functionality where we shall use it. Syntax The ng add command uses the npm package manager to install the library package, and invokes schematics that are included in the package to other scaffolding within the project code, such as adding import statements, fonts, themes, and so on. Library typing Library packages include typings in .d.ts files. If your library’s package does not include typings and IDE shows an error, you have to install the library’s associated @types/package. For example, suppose, you have a library named d1: Types defined in a @types/ package for a library installed into the workspace are automatically added to the TypeScript configuration for the project that uses that library. TypeScript looks for types in the node_modules/@types folder by default, so you don’t have to add each type package individually. If a library doesn’t contain typings at @types/, you can still use it by manually adding typings for it. You can do it by following: Create a typings.d.ts file in your src/ folder. This file is automatically included as global type definition. Add the following code in src/typings.d.ts. Add the following code in the component or file that uses the library: Updating libraries You can update the libraries by using ng update command. It updates individual library versions. The Angular CLI checks the latest published release of the library, and if it finds that the latest version is newer than your installed version, downloads it and updates your package.json to match the latest version. Syntax Note: When you update Angular to a new version, you must ensure that any libraries you are using are current. If libraries have interdependencies, they also must be updated. How to add a library to the runtime global scope Legacy JavaScript libraries that are not imported into an app can be added to the runtime global scope and loaded as if they were in a script tag. You have to configure the CLI to do this at build time using the “scripts” and “styles” options of the build target in the CLI configuration file, angular.json. For example, to use the Bootstrap 4 library, first install the library and its dependencies using the npm package manager: Add the Bootstrap CSS file to the “styles” array: Creating new libraries You can create and publish your own new libraries to extend Angular functionalities. It is generally used when you need to solve the same problem in more than one app (or want to share your solution with other developers), you have a candidate for a library. For example: You can create a button that sends users to your company website that would be included in all apps that your company builds. Open Angular CLI and use the following syntax to create a new library. Syntax This will create a projects/my-lib folder in your workspace, which contains a component and a service inside an NgModule. The workspace configuration file, angular.json, is updated with a project of type ‘library’. Now, you can built, test and lint your project using the following commands: