Weather App Using Angular
Last Updated :
23 Jul, 2025
We will be creating a weather application using the Angular framework. This app will allow users to check the current weather conditions by entering a city name. It will provide detailed information including temperature, weather description, wind speed, and humidity. With responsive design and interactive features, the app will offer a user-friendly experience across various devices.
Project Preview
Project PreviewPrerequisites
Approach
- We will initialize an Angular project to build a weather application, setting up the basic structure and components.
- We will use custom CSS to style the app, ensuring a clean and responsive design.
- We will integrate the OpenWeatherMap API to fetch and display real-time weather data based on user input.
- We will implement features to show temperature, weather description, wind speed, and humidity, with proper error handling and a loading indicator for a smooth user experience.
Steps to Create Weather App using Angular
Step 1: Install Angular CLI
If you haven’t installed Angular CLI yet, install it using the following command
npm install -g @angular/cli
Step 2: Create a New Angular Project
ng new weather-app --no-standalone
cd weather-app
Step 3: Create a Component
Create a component. You can generate a component using the Angular CLI:
ng generate component weather-app
Step 4: Install dependencies
Install moment library for real-time date fetching:
ng install moment --save
Dependencies
"dependencies": {
"@angular/animations": "^18.2.1",
"@angular/common": "^18.2.1",
"@angular/compiler": "^18.2.1",
"@angular/core": "^18.2.1",
"@angular/forms": "^18.2.1",
"@angular/platform-browser": "^18.2.1",
"@angular/platform-browser-dynamic": "^18.2.1",
"@angular/router": "^18.2.1",
"moment": "^2.30.1",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.10"
}
Folder Structure
Folder StructureExample: Create the required files as seen in the folder structure and add the following codes.
Weather Component
Below mentioned is Weather Component having HTML, CSS and JavaScript code having an input field to add state name and a Get Weather Button to show the weather update along with humidity and wind speed.
HTML
<!--weather-app.component.html-->
<div class="container">
<div class="weather-card">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Weather App Using Angular
</h3>
<input type="text" [(ngModel)]="cityName" placeholder="Enter city name">
<button (click)="getWeather()">Get Weather</button>
<div *ngIf="loading" class="loading">
Loading...
</div>
<div *ngIf="error" class="error-message">
{{ error }}
</div>
<div *ngIf="weatherData" class="animate__animated animate__fadeIn" id="weather-info">
<h3 id="city-name">{{ weatherData.name }}</h3>
<p id="date">{{ currentDate }}</p>
<img [src]="iconUrl" alt="Weather Icon" id="weather-icon">
<p id="temperature">{{ weatherData.main.temp }}°C</p>
<p id="description">{{ weatherData.weather[0].description }}</p>
<p id="humidity">Humidity: {{ weatherData.main.humidity }}%</p>
<p id="wind-speed">Wind Speed: {{ weatherData.wind.speed }} m/s</p>
</div>
</div>
</div>
/**weather-app.component.css**/
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(to right, #4CAF50, #2196F3);
}
.container {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.weather-card {
background-color: rgba(255, 255, 255, 0.95);
border-radius: 20px;
border: 2px solid #f44336;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
width: 100%;
max-width: 450px;
animation: fadeIn 1s ease-in-out;
}
.weather-card:hover {
transform: scale(1.05);
}
input[type="text"] {
padding: 15px;
margin: 10px 0;
width: 100%;
max-width: 300px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: border-color 0.3s ease-in-out;
}
input[type="text"]:focus {
outline: none;
border-color: #2196F3;
}
input[type="text"]::placeholder {
color: #aaa;
}
button {
padding: 12px 20px;
margin-top: 10px;
background-color: #2196F3;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
button:hover {
background-color: #1565C0;
transform: translateY(-3px);
}
#weather-info {
display: none;
margin-top: 20px;
animation: fadeIn 1s ease-in-out;
}
#weather-icon {
width: 100px;
height: 100px;
}
#temperature {
font-size: 26px;
font-weight: bold;
color: #333;
margin: 8px 0;
}
#description {
font-size: 20px;
color: #555;
margin-bottom: 10px;
}
#wind-speed,
#humidity,
#date {
font-size: 16px;
color: #555;
}
#date {
margin-bottom: 5px;
color: #888;
}
.loading {
font-size: 18px;
color: #2196F3;
margin-top: 20px;
}
.error-message {
font-size: 18px;
color: #f44336;
margin-top: 20px;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 600px) {
.weather-card {
padding: 20px;
width: 90%;
}
input[type="text"] {
font-size: 14px;
}
button {
font-size: 14px;
}
#temperature {
font-size: 22px;
}
#description {
font-size: 18px;
}
#wind-speed,
#humidity,
#date {
font-size: 14px;
}
}
// weather-app.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { WeatherAppComponent } from './weather-app.component';
describe('WeatherAppComponent', () => {
let component: WeatherAppComponent;
let fixture: ComponentFixture<WeatherAppComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [WeatherAppComponent]
});
fixture = TestBed.createComponent(WeatherAppComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
// weather-app.component.ts
import { Component, OnInit } from '@angular/core';
import moment from 'moment';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-weather-app',
templateUrl: './weather-app.component.html',
styleUrls: ['./weather-app.component.css']
})
export class WeatherAppComponent implements OnInit {
cityName: string = 'Pune';
weatherData: any;
iconUrl: string = '';
currentDate: string = '';
loading: boolean = false;
error: string = '';
private url = 'https://api.openweathermap.org/data/2.5/weather';
private apiKey = 'f00c38e0279b7bc85480c3fe775d518c';
constructor(private http: HttpClient) { }
ngOnInit(): void {
this.getWeather();
}
getWeather(): void {
this.loading = true;
this.error = '';
const fullUrl = `${this.url}?q=${this.cityName}&appid=${this.apiKey}&units=metric`;
this.http.get(fullUrl).subscribe(
(data: any) => {
this.weatherData = data;
this.iconUrl = `https://openweathermap.org/img/w/$%7Bdata.weather%5B0%5D.icon%7D.png%60;
this.currentDate = moment().format('MMMM Do YYYY, h:mm:ss a');
document.getElementById('weather-info')?.style.setProperty('display', 'block');
this.loading = false;
},
(error) => {
this.error = 'City not found. Please try again.';
this.loading = false;
console.error('Error fetching weather data:', error);
}
);
}
}
App Component
Below mentioned is the App Component having app.component.html, app.module.ts and app.component.ts file. Having selector of weather component in HTML file and necessary imports in app.module.ts file.
HTML
<!--app.component.html-->
<app-weather-app></app-weather-app>
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'weather-app';
}
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { WeatherAppComponent } from './weather-app/weather-app.component';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
WeatherAppComponent
],
bootstrap: [AppComponent], imports: [BrowserModule,
FormsModule], providers: [provideHttpClient(withInterceptorsFromDi())]
})
export class AppModule { }
Complete Code:
HTML
<!--weather-app.component.html-->
<div class="container">
<div class="weather-card">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Weather App Using Angular
</h3>
<input type="text" [(ngModel)]="cityName" placeholder="Enter city name">
<button (click)="getWeather()">Get Weather</button>
<div *ngIf="loading" class="loading">
Loading...
</div>
<div *ngIf="error" class="error-message">
{{ error }}
</div>
<div *ngIf="weatherData" class="animate__animated animate__fadeIn" id="weather-info">
<h3 id="city-name">{{ weatherData.name }}</h3>
<p id="date">{{ currentDate }}</p>
<img [src]="iconUrl" alt="Weather Icon" id="weather-icon">
<p id="temperature">{{ weatherData.main.temp }}°C</p>
<p id="description">{{ weatherData.weather[0].description }}</p>
<p id="humidity">Humidity: {{ weatherData.main.humidity }}%</p>
<p id="wind-speed">Wind Speed: {{ weatherData.wind.speed }} m/s</p>
</div>
</div>
</div>
<!--app.component.html-->
<app-weather-app></app-weather-app>
/**weather-app.component.css**/
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(to right, #4CAF50, #2196F3);
}
.container {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.weather-card {
background-color: rgba(255, 255, 255, 0.95);
border-radius: 20px;
border: 2px solid #f44336;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
width: 100%;
max-width: 450px;
animation: fadeIn 1s ease-in-out;
}
.weather-card:hover {
transform: scale(1.05);
}
input[type="text"] {
padding: 15px;
margin: 10px 0;
width: 100%;
max-width: 300px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: border-color 0.3s ease-in-out;
}
input[type="text"]:focus {
outline: none;
border-color: #2196F3;
}
input[type="text"]::placeholder {
color: #aaa;
}
button {
padding: 12px 20px;
margin-top: 10px;
background-color: #2196F3;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
button:hover {
background-color: #1565C0;
transform: translateY(-3px);
}
#weather-info {
display: none;
margin-top: 20px;
animation: fadeIn 1s ease-in-out;
}
#weather-icon {
width: 100px;
height: 100px;
}
#temperature {
font-size: 26px;
font-weight: bold;
color: #333;
margin: 8px 0;
}
#description {
font-size: 20px;
color: #555;
margin-bottom: 10px;
}
#wind-speed,
#humidity,
#date {
font-size: 16px;
color: #555;
}
#date {
margin-bottom: 5px;
color: #888;
}
.loading {
font-size: 18px;
color: #2196F3;
margin-top: 20px;
}
.error-message {
font-size: 18px;
color: #f44336;
margin-top: 20px;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 600px) {
.weather-card {
padding: 20px;
width: 90%;
}
input[type="text"] {
font-size: 14px;
}
button {
font-size: 14px;
}
#temperature {
font-size: 22px;
}
#description {
font-size: 18px;
}
#wind-speed,
#humidity,
#date {
font-size: 14px;
}
}
// weather-app.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { WeatherAppComponent } from './weather-app.component';
describe('WeatherAppComponent', () => {
let component: WeatherAppComponent;
let fixture: ComponentFixture<WeatherAppComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [WeatherAppComponent]
});
fixture = TestBed.createComponent(WeatherAppComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
// weather-app.component.ts
import { Component, OnInit } from '@angular/core';
import moment from 'moment';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-weather-app',
templateUrl: './weather-app.component.html',
styleUrls: ['./weather-app.component.css']
})
export class WeatherAppComponent implements OnInit {
cityName: string = 'Pune';
weatherData: any;
iconUrl: string = '';
currentDate: string = '';
loading: boolean = false;
error: string = '';
private url = 'https://api.openweathermap.org/data/2.5/weather';
private apiKey = 'f00c38e0279b7bc85480c3fe775d518c';
constructor(private http: HttpClient) { }
ngOnInit(): void {
this.getWeather();
}
getWeather(): void {
this.loading = true;
this.error = '';
const fullUrl = `${this.url}?q=${this.cityName}&appid=${this.apiKey}&units=metric`;
this.http.get(fullUrl).subscribe(
(data: any) => {
this.weatherData = data;
this.iconUrl = `https://openweathermap.org/img/w/$%7Bdata.weather%5B0%5D.icon%7D.png%60;
this.currentDate = moment().format('MMMM Do YYYY, h:mm:ss a');
document.getElementById('weather-info')?.style.setProperty('display', 'block');
this.loading = false;
},
(error) => {
this.error = 'City not found. Please try again.';
this.loading = false;
console.error('Error fetching weather data:', error);
}
);
}
}
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'weather-app';
}
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { WeatherAppComponent } from './weather-app/weather-app.component';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
WeatherAppComponent
],
bootstrap: [AppComponent], imports: [BrowserModule,
FormsModule], providers: [provideHttpClient(withInterceptorsFromDi())]
})
export class AppModule { }
Open the terminal, run this command from your root directory to start the application
ng serve --open
Open your browser and navigate to http://localhost:4200
Output
Similar Reads
AngularJS Basics
AngularJS TutorialAngularJS is a free and open-source JavaScript framework that helps developers build modern web applications. It extends HTML with new attributes and it is perfect for single-page applications (SPAs). AngularJS, developed by Google, has been important in web development since its inception in 2009.
5 min read
Introduction to AngularJSAngularJS is a popular open-source framework that simplifies web development by creating interactive single-page applications (SPAs). Unlike traditional websites that load new pages for each click, SPAs offer a smoother user experience by updating content on the same page. AngularJS makes this possi
4 min read
Angular CLI | Angular Project SetupAngular is an open-source front-end web application framework that is used for building single-page and complex web applications. By default, angular uses TypeScript for creating logic but as the browser doesn't know typescript it converts typescript into javascript in order to make typescript under
3 min read
AngularJS ExpressionsIn this article, we will see the Expressions in AngularJS, along with understanding their implementation through the examples. Expressions in AngularJS are used to bind application data to HTML. The expressions are resolved by AngularJS and the result is returned back to where the expression is writ
2 min read
AngularJS ModulesThe AngularJS module defines the functionality of the application which is applied on the entire HTML page. It helps to link many components. So it is just a group of related components. It is a container that consists of different parts like controllers, services, and directives. Note: These module
3 min read
AngularJS ng-model DirectiveThe ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations.
4 min read
AngularJS Data BindingIn this article, we will see the Data Binding in AngularJS, along with understanding the various types of Data Binding available with their implementations. Angular provides a function Data Binding which helps us to have an almost real-time reflection of the input given by the user i.e. it creates a
4 min read
AngularJS ControllersIn this article, we will see the Controller in AngularJS along with knowing how Controller works, the concept of the Controller method & how the Controller can be implemented in an external. We will understand all these aspects with the help of their implementation & accordingly will its ill
3 min read
AngularJS | ScopeScope in AngularJS is the binding part of HTML view and JavaScript controller. When you add properties into the scope object in the JavaScript controller, only then the HTML view gets access to those properties. There are two types of Scope in AngularJS. $Scope$rootScope Scope: There is few specific
2 min read
AngularJS ServicesThe Services is a function or an object that avails or limit to the application in AngularJS, ie., it is used to create variables/data that can be shared and can be used outside the component in which it is defined. Service facilitates built-in service or can make our own service. The Service can on
4 min read
AngularJS | AJAX - $httpThe AngularJS provides a control service named as AJAX - $http, which serves the task for reading all the data that is available on the remote servers. The demand for the requirement of desired records gets met when the server makes the database call by using the browser. The data is mostly needed i
3 min read
AngularJS | TablesThe data in tables are basically repeatable, so you can use ng-repeat directives to create tables easily The example will clear the approach. Syntax: <element ng-repeat="expression">Content..<element> Displayed Data in table. html <!DOCTYPE html> <html> <head> <title
2 min read
AngularJS Select BoxesThe Select Boxes in AngularJS can be utilized to create dropdown lists, that are based on the objects or an array. The Select box can be created in 2 ways, i.e., either by using the ng-options directive that is used to build and bind HTML elements with options to model property or by using the ng-re
2 min read
AngularJS SQLIn any web application, we need to save, update, insert and fetch data to and from a database. AngularJS is a JavaScript MVC (Model-View-Controller) framework developed by Google. It helps developers to build well-structured, easily testable, and maintainable front-end applications. Important Featu
3 min read
AngularJS HTML DOMThe HTML DOM in AngularJS facilitates the directives that bind the application data with the attributes of HTML DOM elements. In this article, we will see such directives that help to bind the data to the HTML DOM element's attribute, along with their basic implementations through the illustrations.
2 min read
AngularJS EventsAn Events in AngularJS can be used to perform particular tasks, based on the action taken. Both Angular Event & the HTML Event will be executed & will not overwrite with an HTML Event. It can be added using the Directives mentioned below: ng-mousemove: The movement of the mouse leads to the
3 min read
AngularJS | FormsForms are collection of controls that is input field, buttons, checkbox and these can be validated real time. As soon as a user of the form completes writing a field and moves to the next one it gets validated and suggests the user where he might have went wrong. So a form can be consisting of the m
3 min read
AngularJS Form ValidationAngularJS performs form validation on the client side. AngularJS monitors the state of the form and input fields (input, text-area, select), and notify the user about the current state. AngularJS also holds information about whether the input fields have been touched, modified, or not. Form input fi
3 min read
AngularJS | APIAngularJS APIs are used for comparing, iterating and converting objects.Basic AngularJS API includes angular.isString() angular.lowercase() angular.uppercase() angular.isNumber() 1. angular.isString() It is used to check whether an object is a string or not.It returns true if the object is string ot
2 min read
AngularJS and W3.CSSWhat is W3.CSS? W3.CSS is a modern framework with built-in responsiveness and easy to learn and use compared to other CSS framework.Its aim is to speed up and simplify web development and support modern responsive devices like Mobile, Laptop, Tablet and DesktopW3.CSS was designed to be a high qualit
2 min read
AngularJS IncludesAngularJS includes, also called as ng-include directive, allows you to insert external HTML content dynamically into an AngularJS application. This capability is particularly useful for modularizing applications, improving code organization, and enhancing code reusability.Syntax:<element ng-inclu
3 min read
AngularJS AnimationsTo create animation effects in AngularJS using the ngAnimate module, which provides support for CSS-based animations. Animation is something that is used to give a dynamic motion effect. Here HTML is transformed to give an illusion of motion using the ngAnimate module that gives us a combined effect
1 min read
AngularJS | ApplicationApplications in AngularJS enable the creation of real-time Applications. There are four primary steps involved in creation of Applications in AngularJS: Creation of List for an Application. Adding elements in the List. Removing elements from the List. Error Handling Below are the steps for creations
3 min read
AngularJS Directives
AngularJS Filters
AngularJS | FiltersThere are some filters that are added in the AngularJS for the sake of making the formatting and working with data easier. There are several in-built filters in AngularJS. They are listed here along with some examples to make the understanding easier. Basic Syntax: Filters are generally added to the
7 min read
AngularJS currency FilterAngularJS currency filter is used to convert a number into a currency format. If no currency format is specified currency filter uses the local currency format. Syntax: {{ currency_expression | currency : symbol : fractionSize}}Parameters: It contains 2 parameters as mentioned above and described be
2 min read
AngularJS | date FilterAngularJS date filter is used to convert a date into a specified format. When the date format is not specified, the default date format is 'MMM d, yyyy'. Syntax: {{ date | date : format : timezone }} Parameter Values: The date filter contains format and timezone parameters which is optional.Some com
2 min read
AngularJS filter FilterThe "filter" Filter in AngularJS is used to filter the array and object elements and return the filtered items. In other words, this filter selects a subset (a smaller array containing elements that meet the filter criteria) of an array from the original array. Syntax: {{arrayexpression | filter: ex
3 min read
AngularJS json FilterThe json filter in AngularJs is used to convert a JavaScript object into a JSON. string.JavaScript object that we are using can be of any kind of JavaScript Object. The json filter piped the object or any expression with JSON so that the result will be displayed in the form of a list, which is bound
2 min read
AngularJS limitTo FilterThe limitTo filter in AngularJS is used to return an array or a string that contains a specified number of elements. This filter can be used with arrays, strings, and numbers. The basic principle, however, remains the same in all three cases: For arrays, it returns an array containing only the speci
2 min read
AngularJS lowercase FilterAngularJS provides different filters to format the data. The lowercase Filter formats the given string to the lowercase. In order to transmit & render the data from a TypeScript code to an HTML template (view), the interpolation concept can be utilized. The lowercase filter is piped with an expr
1 min read
AngularJS number FilterAngularJS number filter is used to convert a number into a string or text. We can also define a limit to display a number of decimal digits. The number filter rounds off the number to specified decimal digits. Syntax: {{ string| number : fractionSize}}Parameter Values: It contains single parameter v
1 min read
AngularJS orderBy FilterAn orderBy Filter in AngularJS is used to sort the given array to the specific order. The default order of sorting the string is in alphabetical order whereas the numbers are numerically sorted. By default, all the items are sorted in ascending order, if the ordering sequence is not specified. Synta
4 min read
AngularJs uppercase FilterThe uppercase Filter in AngularJS is used to change a string to an uppercase string or letters. Syntax: {{ string | uppercase}} Example: This example describes the use of the uppercase Filter in AngularJS. HTML <!DOCTYPE html> <html> <head> <title>uppercase Filter</title
1 min read
AngularJS Converting Functions
AngularJS Comparing Functions
AngularJS Questions
How to bundle an Angular app for production?Introduction Before deploying the web app, Angular provides a way to check the behavior of the web application with the help of a few CLI commands. Usually, the ng serves command is used to build, watch, and serve the application from local memory. But for deployment, the behavior of the application
4 min read
How to add many functions in one ng-click directive?The ng-click Directive in AngluarJS is used to apply custom behavior when an element is clicked. It can be used to show/hide some element or it can popup alert when the button is clicked. The ng-click directive is a very handy tool used in AngularJS. When an HTML is clicked, the ng-click directive t
2 min read
How to directly update a field by using ng-click in AngularJS ?In this article, we will see how to update the field directly with the help of the ng-click directive in AngularJS, along with understanding different ways to implement it through the implementations. Any field can be updated with ng-click using a custom JavaScript function. For this, we can make a
3 min read
How to Add Dynamic Options for Multiple Selects Inside ng-repeat Directive ?Given an HTML document containing some options element and the task is to add an array of javascript objects dynamically with multiple selects using ng-repeat in angularJS. Approach: The task is done using ng-repeat which loops through an array. Let's call this array "models". Each select menu prese
3 min read
How to detect when an @Input() value changes in Angular?@Input() is basically a decorator to bind a property as an input. It is used to pass data i.e property binding from one component to other or we can say, from parent to child component. It is bound with the DOM element. When the DOM element value is changed, Angular automatically updates this proper
3 min read
How to open popup using Angular and Bootstrap ?Adding Bootstrap to your Angular application is an easy process. Just write the following command in your Angular CLI. It will add bootstrap into your node_modules folder. ng add @ng-bootstrap/ng-bootstrap Approach: Import NgbModal module in the TypeScript file of the corresponding component, and th
2 min read
How to reload or re-render the entire page using AngularJS?While working with AngularJS we might come across a time when we want our user to switch contexts and re-render everything again.AngularJS provides a method by which we can re-render or even reload the entire page. So in this article, we will see how we can reload the route instead of just reloading
2 min read
How to add input fields dynamically on button click in AngularJS ?The task is to add an input field on the page when the user clicks on the button using AngularJs. Steps: The required component for the operation is created (add-inputComponent). In that component, html file (add-input.component.html) required html is written. In that HTML, the main div for input fi
2 min read
How to Create Button Dynamically with Click Event in Angular ?The task is to create a button dynamically with a click event using AngularJS, i.e., whenever someone clicks on the button then a new button gets created. The easiest way to create a button in AngularJS is to use the ng-repeat directive. We can easily hook up a repeat logic inside a button click eve
2 min read
How to use jQuery in Angular ?In this tutorial, we will learn how we can use jQuery with Angular. There are two ways in which we can use jQuery with Angular as discussed below: Table of Content By installing jQuery using the npm commandUsing jQuery CDN to use itBy installing jQuery using the npm commandYou can install the jQuery
2 min read
AngularJS Examples The following AngularJS section contains a wide collection of AngularJS examples. The AngularJS examples are categorized based on the topics including basics, directives, functions, and Miscellaneous. Each example section contains multiple approaches to solve the problems. Prerequisites: AngularJS T
2 min read