Skip to content
- Tutorials
- Courses
- Go Premium
-
Angular Tutorial
Last Updated :
23 Jul, 2025
Angular is a powerful, open-source web application framework for building dynamic and scalable single-page applications (SPAs). Developed by Google, Angular provides a comprehensive solution for front-end development with tools for routing, form handling, HTTP services, and more.
- Designed for building scalable web applications
- Component-based architecture for efficient development
- Supports powerful features like two-way data binding, routing, and dependency injection
- Ideal for single-page applications (SPAs) and progressive web apps (PWAs)
To begin developing with Angular, you first need to set up your development environment by installing Node.js and Angular CLI.
Let us now take a look at our first code example.
JavaScript
// Import Angular core modules
import { Component } from '@angular/core';
// Define the AppComponent
@Component({
selector: 'app-root',
template: '<h1>Welcome to the Angular Tutorial</h1>',
styles: ['h1 { color: blue; }']
})
export class AppComponent {
title = 'angular-tutorial';
}
Now, open your browser and visit http://localhost:4200 to see your Angular app in action.
Welcome to the Angular Tutorial
In this example
- The AppComponent class is decorated with @Component, which defines its selector, template, and styles.
- The template uses Angular's interpolation syntax to display a simple "Welcome to the Angular Tutorial" message.
- The AppComponent class defines the component logic and properties.
Why Learn Angular?
- Simplifies Front-End Development: Angular provides all the tools needed for front-end development in a single framework, making it easier to build dynamic and scalable applications.
- Component-Based Architecture: Angular’s component-based structure helps break down large applications into smaller, manageable parts, making development and maintenance easier.
- Powerful Features: Angular offers powerful features such as two-way data binding, routing, and form validation that speed up the development process.
- Seamless Integration: Angular integrates well with RESTful APIs, making it ideal for building full-stack web applications and SPAs.
- Strong Community Support: With strong backing from Google and an active community, Angular is continuously updated and improved, ensuring long-term stability.
Angular tutorial Prerequisites: HTML, JavaScript, TypeScript
Angular Basics
Angular Versions
Angular Projects
Angular For Interview
Features of Angular
- It uses components and directives. Components are the directives with a template.
- It is written in Microsoft’s TypeScript language, which is a superset of ECMAScript 6 (ES6).
- Angular is supported by all the popular mobile browsers.
- Properties enclosed in “()” and “[]” are used to bind data between the view and the model.
- It provides support for TypeScript and JavaScript.
- Angular uses @Route Config{(…)} for routing configuration.
- It has a better structure compared to AngularJS, easier to create and maintain for large applications but behind AngularJS in the case of small applications.
- It comes with the Angular CLI tool.
Applications of Angular
- Single-Page Applications (SPAs): Angular excels at creating SPAs, where a single webpage dynamically updates content as users interact with it.
- Real-Time Applications: Use Angular for chat applications, weather forecasts, and live tracking systems that require immediate updates.
- Enterprise Applications: Angular is commonly used for developing large-scale enterprise applications. Its modular architecture, dependency injection, and TypeScript support make it suitable for building complex and maintainable applications.
- Content Management Systems (CMS): Angular can be used to build custom content management systems, providing a dynamic and responsive user interface for managing content.
History of Angular
- Angular version 1.0 was released in 2012.
- Miško Hevery, a employee at Google, started to work with AngularJS in 2009.
- The project is now officially supported by Google, and the idea turned out very well.
Angular CheatSheet
The cheat sheet is a quick reading manual that will help you to revise all the concepts at a glance. The detailed description is covered in the Angular Cheat Sheet – A Basic Guide to Angular Article.
Similar Reads
Web Development Technologies Web development refers to building, creating, and maintaining websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet, i.e., websites.To better understand the foundation of web devel
7 min read
HTML Tutorial
CSS Tutorial CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the three main components of a webpage, along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or
7 min read
JS Tutorial
JavaScript TutorialJavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.JavaScript on Client Side: On the client side, Jav
11 min read
JSON TutorialJSON (JavaScript Object Notation) is a widely-used, lightweight data format for representing structured data. It is used extensively in APIs, configuration files, and data exchange between servers and clients. JSON (JavaScript Object Notation) and XML (eXtensible Markup Language) are popular formats
6 min read
TypeScript TutorialTypeScript is a superset of JavaScript that adds extra features like static typing, interfaces, enums, and more. Essentially, TypeScript is JavaScript with additional syntax for defining types, making it a powerful tool for building scalable and maintainable applications.Static typing allows you to
8 min read
Vue.js TutorialVue.js is a progressive JavaScript framework for building user interfaces. It stands out for its simplicity, seamless integration with other libraries, and reactive data binding.Built on JavaScript for flexible and component-based development.Supports declarative rendering, reactivity, and two-way d
4 min read
jQuery TutorialjQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Front End
React TutorialReact is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user experience.Note: The latest stable version
7 min read
Angular TutorialAngular is a powerful, open-source web application framework for building dynamic and scalable single-page applications (SPAs). Developed by Google, Angular provides a comprehensive solution for front-end development with tools for routing, form handling, HTTP services, and more.Designed for buildin
4 min read
Backend
Node.js TutorialNode.js is a powerful, open-source, and cross-platform JavaScript runtime environment built on Chrome's V8 engine. It allows you to run JavaScript code outside the browser, making it ideal for building scalable server-side and networking applications.JavaScript was mainly used for frontend developme
4 min read
Express.js TutorialExpress.js is a minimal and flexible Node.js web application framework that provides a list of features for building web and mobile applications easily. It simplifies the development of server-side applications by offering an easy-to-use API for routing, middleware, and HTTP utilities.Built on Node.
4 min read
PHP TutorialPHP is a popular, open-source scripting language mainly used in web development. It runs on the server side and generates dynamic content that is displayed on a web application. PHP is easy to embed in HTML, and it allows developers to create interactive web pages and handle tasks like database mana
9 min read
Laravel TutorialLaravel is an open-source PHP web application framework that has gained immense popularity since its inception in 2011, created by Taylor Otwell. This renowned framework empowers developers to build robust, scalable web applications with remarkable ease. As a developer-friendly framework, Laravel of
3 min read
Database
Web Technologies Questions The following Web Technologies Questions section contains a wide collection of web-based questions. These questions are categorized based on the topics HTML, CSS, JavaScript, and many more. Each section contains a bulk of questions with multiple solutions. Table of Content HTML QuestionsCSS Question
15+ min read
`;
$(commentSectionTemplate).insertBefore(".article--recommended");
}
loadComments();
});
});
function loadComments() {
if ($("iframe[id*='discuss-iframe']").length top_of_element && top_of_screen articleRecommendedTop && top_of_screen articleRecommendedBottom)) {
if (!isfollowingApiCall) {
isfollowingApiCall = true;
setTimeout(function(){
if (loginData && loginData.isLoggedIn) {
if (loginData.userName !== $('#followAuthor').val()) {
is_following();
} else {
$('.profileCard-profile-picture').css('background-color', '#E7E7E7');
}
} else {
$('.follow-btn').removeClass('hideIt');
}
}, 3000);
}
}
});
}
$(".accordion-header").click(function() {
var arrowIcon = $(this).find('.bottom-arrow-icon');
arrowIcon.toggleClass('rotate180');
});
});
window.isReportArticle = false;
function report_article(){
if (!loginData || !loginData.isLoggedIn) {
const loginModalButton = $('.login-modal-btn')
if (loginModalButton.length) {
loginModalButton.click();
}
return;
}
if(!window.isReportArticle){
//to add loader
$('.report-loader').addClass('spinner');
jQuery('#report_modal_content').load(gfgSiteUrl+'wp-content/themes/iconic-one/report-modal.php', {
PRACTICE_API_URL: practiceAPIURL,
PRACTICE_URL:practiceURL
},function(responseTxt, statusTxt, xhr){
if(statusTxt == "error"){
alert("Error: " + xhr.status + ": " + xhr.statusText);
}
});
}else{
window.scrollTo({ top: 0, behavior: 'smooth' });
$("#report_modal_content").show();
}
}
function closeShareModal() {
const shareOption = document.querySelector('[data-gfg-action="share-article"]');
shareOption.classList.remove("hover_share_menu");
let shareModal = document.querySelector(".hover__share-modal-container");
shareModal && shareModal.remove();
}
function openShareModal() {
closeShareModal(); // Remove existing modal if any
let shareModal = document.querySelector(".three_dot_dropdown_share");
shareModal.appendChild(Object.assign(document.createElement("div"), { className: "hover__share-modal-container" }));
document.querySelector(".hover__share-modal-container").append(
Object.assign(document.createElement('div'), { className: "share__modal" }),
);
document.querySelector(".share__modal").append(Object.assign(document.createElement('h1'), { className: "share__modal-heading" }, { textContent: "Share to" }));
const socialOptions = ["LinkedIn", "WhatsApp","Twitter", "Copy Link"];
socialOptions.forEach((socialOption) => {
const socialContainer = Object.assign(document.createElement('div'), { className: "social__container" });
const icon = Object.assign(document.createElement("div"), { className: `share__icon share__${socialOption.split(" ").join("")}-icon` });
const socialText = Object.assign(document.createElement("span"), { className: "share__option-text" }, { textContent: `${socialOption}` });
const shareLink = (socialOption === "Copy Link") ?
Object.assign(document.createElement('div'), { role: "button", className: "link-container CopyLink" }) :
Object.assign(document.createElement('a'), { className: "link-container" });
if (socialOption === "LinkedIn") {
shareLink.setAttribute('href', `https://www.linkedin.com/sharing/share-offsite/?url=${window.location.href}`);
shareLink.setAttribute('target', '_blank');
}
if (socialOption === "WhatsApp") {
shareLink.setAttribute('href', `https://api.whatsapp.com/send?text=${window.location.href}`);
shareLink.setAttribute('target', "_blank");
}
if (socialOption === "Twitter") {
shareLink.setAttribute('href', `https://twitter.com/intent/tweet?url=${window.location.href}`);
shareLink.setAttribute('target', "_blank");
}
shareLink.append(icon, socialText);
socialContainer.append(shareLink);
document.querySelector(".share__modal").appendChild(socialContainer);
//adding copy url functionality
if(socialOption === "Copy Link") {
shareLink.addEventListener("click", function() {
var tempInput = document.createElement("input");
tempInput.value = window.location.href;
document.body.appendChild(tempInput);
tempInput.select();
tempInput.setSelectionRange(0, 99999); // For mobile devices
document.execCommand('copy');
document.body.removeChild(tempInput);
this.querySelector(".share__option-text").textContent = "Copied"
})
}
});
// document.querySelector(".hover__share-modal-container").addEventListener("mouseover", () => document.querySelector('[data-gfg-action="share-article"]').classList.add("hover_share_menu"));
}
function toggleLikeElementVisibility(selector, show) {
document.querySelector(`.${selector}`).style.display = show ? "block" : "none";
}
function closeKebabMenu(){
document.getElementById("myDropdown").classList.toggle("show");
}