Tutorials, guides and articles on Angular framework.
Angular
Implementing a responsive Kendo UI Grid is a common use case in Angular applications. If you have been looking for a way to set the height of Kendo UI grid to 100%, you may have come across this article in Kendo UI docs. It explains how to set the grid…
Angular
Reusing template HTML blocks can significantly improve code readability in a component. Creating a new component is the most common way tackle code duplication, but sometimes you only need some local markup to be repeated. In this post, we'll use ng-template to reuse template HTML blocks this in Angular. Understanding ng-template…
Angular
Kendo UI Grid supports binding to local data on the client side with kendoGridBinding directive. The directive supports client-side filtering, paging and sorting of the data out of the box. As the directive takes care of all operations, you might wonder how to access the filtered data across pages in…
Angular
Suppose you have an Angular component that is retrieving data. You set loading to true before calling subscribe and set it back to false in a finalize pipe: import { Component, OnInit } from '@angular/core'; import { finalize } from 'rxjs/operators'; @Component({ selector: 'app-my-component', template: `<div *ngIf="loading">Loading...</div>` }) export class…
Angular
Unit testing is an important part of Angular application development. Unit tests help ensure units of code work as expected in your Angular application. What are these units of code in the case of Angular? They're the components, services, directives and pipes that make up the whole application. The benefits…
Angular
A few months ago, our team made the smart move to migrate our component library from Lerna to Nx. The decision brought us the benefit of faster builds, thanks to Nx's excellent caching feature. However, one challenge we faced was the absence of Angular CLI support, rendering commands like ng…
Angular
Passing data from parent to child component is trivial in Angular thanks to @Input decorator. In this post, I want to share how to detect @Input value changes in Angular. This can be useful if you need to perform an action when the value of the input changes. Using setters…
Angular
Migrating your Angular project to version 14 will automatically remove the defaultProject property in angular.json for single project workspaces. Let's understand what defaultProject is and when you might need it. What is default project in Angular? In Angular, a "default project" refers to the primary application or module within an…
Angular
One of the most loved features of Angular is its ability to automatically update the view whenever data changes. This is thanks to the default Angular's change detection mechanism, which constantly checks for changes in data and updates the view accordingly. While this is great for most use cases, it…
Angular
In this post, I will show you how to set page title based on route in Angular. Angular provides a built-in Title service that we can use to set the title of the web page dynamically from code. We will use the title service in combination with router events to…
Angular
In this blog post, I will show you how to generate a routes file for prerendering an Angular Universal application. We will create a basic routes file and append routes dynamically from an XML sitemap ahead of running npm run prerender command when building the application. Pre-requisites This post assumes…
Angular
While upgrading Node from v12 to v16, I came across a problem with Angular unit tests where an exception would stop the test run with error Cannot read property 'range' of undefined. In this post, I'll explain the steps I took to identify the root cause of issue and propose…