Author: Faris Khalil
-
Angular 7 Event Binding
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…
-
Angular 7 String Interpolation
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.…
-
Angular Databinding
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…
-
Style elements dynamically with ngStyle
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:…
-
Use of *ngIf directive to change the output conditionally
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…
-
Angular 7 Directives
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…
-
Angular 7 Components
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…
-
Angular 7 Architecture
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…
-
Angular Libraries
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…
-
All Angular CLI commands
Angular CLI is a command line interface tool which is used to initialize, develop, scaffold, and maintain Angular applications. You can use these command directly on command prompt or indirectly through an interactive UI i.e. Angular Console. Command Alias Description add It is used to add support for an external library to your project. build…