How to Show Angular Material Table Column Data in Dropdown Options?
In the previous Angular material mat table tutorial you learnt how to use Angular Material mat table. This is a response to a viewer comment where the viewer asked about how to show dropdown options using column data.
How to Filter Angular Material Mat Table by Dropdown?
In our Angular material mat table tutorial you learnt how to use Angular Material mat table. This is a continuation to that tutorial where you’ll learn how to filter the data in the mat table based on dropdown selection.
In this tutorial, you’ll learn how to create a login screen using Next.js framework. This tutorial will be split in multiple parts for ease of understanding. In this part, I’ll share how to get started with Next.js and create the design of the login screen using Bootstrap. So, let’s get started.
Getting Started With Next.js If you are just getting started make sure you have Node.js version 10.13 or later.
[Read More]
The digital universe witnesses new trends every year, and it is crucial to consider them for winning digital solutions. It is vital for decision-makers to explore these trends while developing web apps to remain competitive in the industry. Today we will discuss some prominent trends in web app development in 2022.
Emerging Web app trends that every digital business needs to focus on. 1. More popularity for Progressive Web Applications The world will witness a widespread use of PWAs by businesses across different industry verticals.
[Read More]
Introduction As we all know, JavaScript is one of the best and leading programming languages transforming the interface of web and mobile applications to improve customer experience. Of all the Javascript frameworks, Angular development is gaining immense popularity and some positive responses from developers and entrepreneurs. As Google-owned Angular, it is highly maintained and supported by a wide spectrum of developers having in-depth knowledge about modern technologies.
Angular is a simple yet powerful framework that keeps up with JavaScript systems and uses modern techniques that make it the preferred choice for many developers.
[Read More]
How to show no records found in Mat Table Angular?
Assuming this is your code where you are making the API call and creating the mat table data source.
import { Component, OnInit } from '@angular/core'; import { MatTableDataSource } from '@angular/material/table'; import { DataService } from './data.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { dataSource : any = null; columnsToDisplay = ['name','username','email', 'website']; constructor(private service : DataService){} ngOnInit(){ this.
[Read More]
Observable subscribe callback getting called mutiple times in Angular.
I had scenario where the subcribe callback was getting called multiple times. Before getting into the issue, let me give you a bit of a context.
So, I had parent component and a couple of child components. Same API data was being used across the child components. Hence, I made the API call in the parent component and create a Subject which communicated the data to the subcribed child components.
[Read More]
We have been using JavaScript for years, and still, it’s not going anywhere for several more years to come. With JavaScript, not only can you create web pages, but you can use it for server-side applications also. Most of the purposes can be served easily if your fundamentals of JavaScript are clear. This is the reason behind the popularity of JavaScript developers. In a survey conducted by Stack Overflow Developer Survey, the results of this survey showed that Javascript is the #1 programming language.
[Read More]
FastAPI is a modern web framework for creating API using Python 3.6+. We already did a couple of tutorial on FastAPIs. Do refer them if you are just getting started with FastAPI.
Creating APIs using Python FastAPI Reading Request Body During POST Request in FastAPI Reading Query Parameters During GET Request in FastAPI In this tutorial, you’ll learn how to host a APIs creating using FastAPI on Clouding.io cloud server. Before getting started with app development and hosting, let’s learn a bit about Clouding.
[Read More]
How to Unit Test Behavior Subject in Angular?
Let’s say you have a service file having a behavior subject.
import { Injectable } from '@angular/core'; import {HttpClient} from '@angular/common/http'; import {map, skipWhile, tap} from 'rxjs/operators' import { BehaviorSubject, Observable } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class ServService { testName$: BehaviorSubject<any> = new BehaviorSubject<any>([]); constructor(private http : HttpClient) { } getData(){ return this.http.get('https://jsonplaceholder.typicode.com/users') .pipe( map((response:any) => response.map(item => item['name'])) ) } } You are using the testName$ in your component’s getObs method as shown:
[Read More]