In this article, we will learn how to bind an array to a HTML table. This means that we want the elements in our array and their attributes to be displayed on the view. For this, we will mainly use some hard-coded data and structure directives like *ngIf and *ngFor. So, initially, if we have… Continue reading Binding Array to a Table
Tag: #javascript
What is a Shared Module?
In Angular, we can create different feature modules for every feature. Each one of these features would require importing the CommonModule and other imports too. Do we really want to repeat all this for every feature module? Or do we have an alternative? Yes, We can define a Shared Module. A Shared Module is used… Continue reading What is a Shared Module?
Understanding Services and Dependency Injection
We’ve all worked with Components and used component communication, but what do we do if we want to share data or logic across components? WE BUILD SERVICES. Let us try to understand what exactly services are. So, a service is basically a class, but with a focused purpose. With services, the code becomes easy to… Continue reading Understanding Services and Dependency Injection
Modules in Angular
What is an Angular Module? A class with an @NgModule decorator which organizes the pieces of an application and extend our application with capabilities from the external libraries. To start with, every angular application has a root application module, called AppModule and a root application component, called AppComponent. The AppModule bootstraps the AppComponent. Looks like… Continue reading Modules in Angular
Using Template Reference variable in Angular
In this article, we will discuss the use of a template reference variable for component communication. A template reference variable is used to give reference to a DOM Element, a component, directive, or a web component within a template. This variable can then be used anywhere inside the template. This is done using a # symbol inside… Continue reading Using Template Reference variable in Angular
REACTIVE FORMS FOR BEGINNERS
In Angular, there are two types of forms: — Template Driven Forms — Reactive Forms If you are new to forms, understand these here. In this blog post, we will learn how to create custom validators for Angular Reactive Forms. So, to start with, I assume that you have already created a project using ng new. Now, suppose we have… Continue reading REACTIVE FORMS FOR BEGINNERS
Add Bootstrap to your Angular CLI Project
This article will help us understand the usage of bootstrap framework within Angular. To understand a little about bootstrap, Bootstrap is the most popular HTML, CSS, and JavaScript framework for web front-end development. It’s great for developing responsive, mobile-first web sites. Bootstrap in Angular Step 1. Create a new Angular Project So, to apply bootstrap to… Continue reading Add Bootstrap to your Angular CLI Project
Creating Custom Pipes in Angular
Previously known as Filters in AngularJS, Custom Pipes can be of two types. Pure and impure custom pipe. Pipe takes an input and returns an output based on the output of transform function evaluation. Usage of Pipes Angular has many built-in pipes. In this article, we’ll see how to create a custom one. Steps Involved In… Continue reading Creating Custom Pipes in Angular
Using @Output and EventEmitter
So, I have an event in one component and I want it to get handled in another component. Does Angular allow me to do that? Big yes! In @angular/core, we have @Output and EventEmitter which allow us to emit event from one component to another. Let us see how to do this. So, to execute… Continue reading Using @Output and EventEmitter
Understanding Component Communication using @Input()
Want your components to share information? Yes, they can! Say you have two components, a parent component (PC) and a child component (CC) and you want the data to move from the parent component to the child component or vice versa, you use COMPONENT COMMUNICATION/INTERACTION. There are multiple ways to achieve that. This article focuses on… Continue reading Understanding Component Communication using @Input()