Tutorials, guides and articles on Angular framework.

Read more about the article Responsive Kendo UI Grid Height with CSS Flexbox
Angular

Responsive Kendo UI Grid Height with CSS Flexbox

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…

0 Comments
Read more about the article How to Reuse Template HTML in Angular
Angular

How to Reuse Template HTML in 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…

0 Comments
Read more about the article How to Get Filtered Data from Kendo UI Grid
Angular

How to Get Filtered Data from Kendo UI Grid

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…

0 Comments
Read more about the article Unit Testing Loading State Changes
Angular

Unit Testing Loading State Changes

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…

0 Comments
Read more about the article Angular Unit Testing Best Practices
Angular

Angular Unit Testing Best Practices

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…

1 Comment
Read more about the article Updating Angular Versions in Nx-Powered Monorepository
Angular

Updating Angular Versions in Nx-Powered Monorepository

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…

0 Comments
Read more about the article Detecting @Input() Value Changes in Angular
Angular

Detecting @Input() Value Changes in 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…

0 Comments
Read more about the article Does Angular require defaultProject property?
Angular

Does Angular require defaultProject property?

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…

0 Comments
Read more about the article Change Detection in Angular: Default vs OnPush
Angular

Change Detection in Angular: Default vs OnPush

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…

0 Comments
Read more about the article How to Set Page Title Based on Route in Angular
Angular

How to Set Page Title Based on Route in 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…

0 Comments
Read more about the article Generating Routes File for Angular Universal Prerender
Angular

Generating Routes File for Angular Universal Prerender

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…

0 Comments