Angular Cheat Sheet - A Basic Guide to Angular

<!DOCTYPE html>    <html lang="en-US" prefix="og: http://ogp.me/ns#" >  <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0"> <link rel="shortcut icon" href="https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_favicon.png" type="image/x-icon" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <meta name="theme-color" content="#308D46" /> <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1' /> <meta name="image" property="og:image" content="https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="200"> <meta property="og:image:height" content="200"> <meta name="facebook-domain-verification" content="xo7t4ve2wn3ywfkjdvwbrk01pvdond" /> <meta property="og:title" content="Angular Cheat Sheet - A Basic Guide to Angular - GeeksforGeeks" /> <meta name="description" content="A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions." /> <meta property="og:url" content="https://www.geeksforgeeks.org/angular-cheat-sheet-a-basic-guide-to-angular/" /> <meta name="keywords" content="Data Structures, Algorithms, Python, Java, C, C++, JavaScript, Android Development, SQL, Data Science, Machine Learning, PHP, Web Development, System Design, Tutorial, Technical Blogs, Interview Experience, Interview Preparation, Programming, Competitive Programming, Jobs, Coding Contests, GATE CSE, HTML, CSS, React, NodeJS, Placement, Aptitude, Quiz, Computer Science, Programming Examples, GeeksforGeeks Courses, Puzzles, SSC, Banking, UPSC, Commerce, Finance, CBSE, School, k12, General Knowledge, News, Mathematics, Exams" /> <meta property="og:site_name" content="GeeksforGeeks" /> <meta property="og:image" content="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220919122049/Angular-Cheat-Sheet.jpg" /> <meta property="article:section" content="Web Technologies" /> <meta property="article:tag" content="GFG Sheets" /> <meta property="article:tag" content="Web-Dev Sheet" /> <meta property="og:type" content="article" /> <meta property="og:locale" content="en_US" /> <meta property="article:published_time" content="2022-09-16 16:04:41+00:00" /> <meta property="article:modified_time" content="2024-03-20 11:37:46+00:00" /> <meta property="og:updated_time" content="2024-03-20 11:37:46+00:00" /> <meta property="og:image:secure_url" content="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220919122049/Angular-Cheat-Sheet.jpg" /> <meta property="og:description" content="A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions." /> <script src="https://cdnads.geeksforgeeks.org/synchronously_gfg_ads.min.js"></script> <script defer src="https://apis.google.com/js/platform.js"></script>        <script> var IHPWT={}; //Initialize Namespace var pbjs = pbjs || {}; pbjs.que = pbjs.que || []; var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; var gptRan = false; </script> <script defer src="https://ads.pubmatic.com/AdServer/js/pwt/162080/12331/pwt.js"></script> <script defer src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <script defer src="https://cdnads.geeksforgeeks.org/prebid.js?ver=0.1"></script> <script defer src="https://cdnads.geeksforgeeks.org/gfg_ads.min.js?ver=0.1"></script> <script> var quizData = JSON.parse("{}"); </script>  <script defer src="https://assets.geeksforgeeks.org/codetabs/v3/codetabs.js" environment="production" domain="gfg" no-scroll></script> <title>Angular Cheat Sheet - A Basic Guide to Angular - GeeksforGeeks</title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="" />     <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "mainEntityOfPage": { "@type": "WebPage", "id": "https://www.geeksforgeeks.org/angular-cheat-sheet-a-basic-guide-to-angular/" }, "headline": "Angular Cheat Sheet A Basic Guide to Angular", "datePublished": "2022-09-16 04:04:41", "dateModified": "2024-03-20 11:37:46", "image": { "@type": "ImageObject", "url": "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220919122049/Angular-Cheat-Sheet.jpg", "width": "1000", "height": "435" }, "author": { "@type": "Organization", "name": "GeeksforGeeks", "url": "https://www.geeksforgeeks.org/", "logo": { "@type": "ImageObject", "url": "https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo-new-2.svg", "width": "301", "height": "40" } }, "publisher": { "@type": "Organization", "name": "GeeksforGeeks", "url": "https://www.geeksforgeeks.org/", "logo": { "@type": "ImageObject", "url": "https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo-new-2.svg", "width": "301", "height": "40" } }, "description": "Angular is a client-side TypeScript-based, front-end web framework developed by the Angular Team at Google, that is mainly used to develop scalable single-page web applications(SPAs) for mobile &amp; desktop. Angular is a great, reusable UI (User Interface) library for developers that helps in building attractive, steady, and utilitarian web pages", "about": [ { "@type": "Thing", "name": "GfgSheets" }, { "@type": "Thing", "name": "WebDevSheet" }, { "@type": "Thing", "name": "WebTechnologies" }, { "@type": "Thing", "name": "AngularJs" } ] }</script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "name": "GeeksforGeeks", "url": "https://www.geeksforgeeks.org/", "potentialAction": { "@type": "SearchAction", "target": "https://www.geeksforgeeks.org/search/{search_term_string}/", "query-input": "required name=search_term_string" } }</script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "GeeksforGeeks", "url": "https://www.geeksforgeeks.org/", "logo": "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png", "description": "A computer science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.", "founder": [ { "@type": "Person", "name": "Sandeep Jain", "url": "https://in.linkedin.com/in/sandeep-jain-b3940815" } ], "sameAs": [ "https://www.facebook.com/geeksforgeeks.org/", "https://twitter.com/geeksforgeeks", "https://www.linkedin.com/company/1299009", "https://www.youtube.com/geeksforgeeksvideos/" ] }</script> <script> var arrPostCat = new Array(); var arrPostCatName="AngularJS"; arrPostCat.push('3665'); arrPostCat.push('2628'); var tIds = "3665,2628,5639,6892"; var termsNames = "AngularJS,WebTechnologies,GFGSheets,WebDevSheet"; var tIdsInclusiveParents = "3665,2628,5639,6892"; var domain = 1; var arrPost = new Array(); var post_id = "880936"; var post_type = "post"; var post_slug = window.location.href; var ip = "64.252.73.144"; var post_title = `Angular Cheat Sheet – A Basic Guide to Angular`; var post_status = "publish"; var practiceAPIURL="https://practiceapi.geeksforgeeks.org/"; var practiceURL="https://practice.geeksforgeeks.org/"; var post_date = "2022-09-16 16:04:41"; var commentSysUrl = "https://discuss.geeksforgeeks.org/commentEmbedV2.js"; //var postAdApiUrlString = ""; var link_on_code_run = ''; var link_search_modal_top = ''; var country_code_cf = "GB"; var postAdApiUrlString = '2628/3665/2628/5639/6892/'; </script>  <link rel="canonical" href="https://www.geeksforgeeks.org/angular-cheat-sheet-a-basic-guide-to-angular/" /> <script type='application/ld+json'>{"@context":"https:\/\/schema.org","@type":"Organization","url":"https:\/\/www.geeksforgeeks.org\/","sameAs":[],"@id":"https:\/\/www.geeksforgeeks.org\/#organization","name":"GeeksforGeeks","logo":"http:\/\/www.geeksforgeeks.org\/wp-content\/uploads\/gfg_200X200-1.png"}</script>  <link rel='dns-prefetch' href='//www.geeksforgeeks.org' /> <link rel='dns-prefetch' href='//s.w.org' /> <script type="text/javascript"> window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/www.geeksforgeeks.org\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.9.8"}}; !function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55358,56760,9792,65039],[55358,56760,8203,9792,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings); </script> <style type="text/css"> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='custom-style-css' href='https://www.geeksforgeeks.org/wp-content/themes/iconic-one/css/gfg.min.css?ver=11.88' type='text/css' media='all' /> <script type='text/javascript' src='https://code.jquery.com/jquery-3.7.1.min.js?ver=3.7.1'></script> <script type='text/javascript' src='https://code.jquery.com/jquery-migrate-3.5.2.min.js?ver=3.5.2'></script> <script type='text/javascript'> /* <![CDATA[ */ var gfgObject = {"authUrl":"https:\/\/auth.geeksforgeeks.org\/","writeApiUrl":"https:\/\/apiwrite.geeksforgeeks.org\/","writeUrl":"https:\/\/write.geeksforgeeks.org\/","utilUrl":"https:\/\/util.geeksforgeeks.org\/","apiUrl":"https:\/\/api.geeksforgeeks.org\/","cfApiUrl":"https:\/\/gfgapi.geeksforgeeks.org\/","baseCompilerURL":"https:\/\/codejudge.geeksforgeeks.org\/","idePageBaseUrl":"https:\/\/ide.geeksforgeeks.org\/","gfgApiScriptUrl":"https:\/\/apiscript.geeksforgeeks.org\/","gfgSiteUrl":"https:\/\/www.geeksforgeeks.org\/","curatedListId":"1","curatedListTitle":"SDE Sheet Problems","utilDjangoCfUrl":"https:\/\/utilapi.geeksforgeeks.org\/","premiumCheckoutSlug":"premium-plans-payment\/","premiumLandingSlug":"premium-plans\/","premiumCssUrl":"https:\/\/www.geeksforgeeks.org\/wp-content\/themes\/iconic-one\/css\/gfgpremium.min.css?ver=1.6","premiumJsUrl":"https:\/\/www.geeksforgeeks.org\/wp-content\/themes\/iconic-one\/js\/gfgpremium.min.js?ver=1.5","utilGoogleUrl":"https:\/\/ugprod.geeksforgeeks.org\/","communityApiUrl":"https:\/\/communityapi.geeksforgeeks.org\/","utilDjangoUrl":"https:\/\/gfgutil.geeksforgeeks.org\/","gfgPracticeUrl":"https:\/\/practiceapi.geeksforgeeks.org\/","gfgMediaUrl":"https:\/\/media.geeksforgeeks.org\/","authDjangoApiUrl":"https:\/\/authapi.geeksforgeeks.org\/","gfgMlApiUrl":"https:\/\/recommendations.geeksforgeeks.org\/","is_home":"","is_category":"","userlevelPremiumPlus":"2","practiceUrl":"https:\/\/practice.geeksforgeeks.org\/","gfgNotificationsApiUrl":"https:\/\/notificationsapi.geeksforgeeks.org\/"}; /* ]]> */ </script> <script type='text/javascript' async="async" src='https://www.geeksforgeeks.org/wp-content/themes/iconic-one/js/gfg.min.js?ver=13.62'></script> <link rel='shortlink' href='https://www.geeksforgeeks.org/?p=880936' /> <style> #wpadminbar{ background: #ff0000 !important; } </style> <style type="text/css" id="custom-background-css"> body.custom-background { background-color: #ffffff; } </style> <link rel="icon" href="https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-100x100.png" sizes="32x32" /> <link rel="icon" href="https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png" sizes="192x192" /> <link rel="apple-touch-icon-precomposed" href="https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png" /> <meta name="msapplication-TileImage" content="https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png" />  <style> #internal-promo-section{ display: none !important; } @media screen and (max-width:1500px) and (min-width:1280px){ body.single .article-page_flex .leftBar { flex-basis: calc(100% - 605px); max-width: calc(100% - 605px); min-width: calc(100% - 605px); } .sidebar_wrapper{ max-width: 300px; min-width: 300px; } div#secondary { min-width: 300px; max-width: 300px; } .widget-area{ padding: 0px; } .article-page_flex .rightBar{ padding: 20px 0px 0px 0px; } .article--viewer_content .a-wrapper .content { padding: 0px 10px 55px 20px; } .oinLeftbar { height: calc(100vh - 350px) !important; } } .autoLeftBar_oin_child{ height: 100% !important; } .autoLeftBar_oin_non_sticky{ height: unset !important; } .sideBar--wrap.newLeftbar > div[id^='GFG_AD_Leftsidebar_']:nth-of-type(1){ padding-top: 20px; } .sideBar--wrap.newLeftbar > div[id^='GFG_AD_Leftsidebar_']{ padding: 5px 0; } @media (max-width:1043px) and (min-width:992px) { .hide-1043992 { display: none!important; } } .mobile-header-list-item{ padding-left:30px; padding-right:10px; margin-top:5px; } .mobile-header-list{ border-bottom: 1px solid rgba(158, 158, 158, 0.3) !important; } .mobile-header-list .dropdown-title{ border-bottom: none !important; font-size: 16px!important; padding: 0px!important; padding-left: 45px!important; font-weight: normal; } .mobile-header-list .upside::after{ transform: rotate(180deg); } </style>    </head> <body class="post-template-default single single-post postid-880936 single-format-standard custom-background custom-background-white"> <script> // Dark mode script const gfgThemeList = Object.freeze({ LIGHT: "gfgThemeLight", DARK: "gfgThemeDark" }) const getThemeFromCookie = () => { let gfg_def_theme = ""; let cookies = document.cookie; let cooks = cookies.split(";"); for (let i = 0; i < cooks.length; i++) { let icook = cooks[i].split("="); if (icook[0].trim() == "gfg_theme") { gfg_def_theme = icook[1].trim(); } } return gfg_def_theme } if(!(post_slug.includes('premium-plans-payment/') || post_slug.includes('premium-plans/'))){ var isDarkMode = getThemeFromCookie() == gfgThemeList.DARK ? true : false; document.querySelector("body").setAttribute("data-dark-mode", isDarkMode); } function setSearchBarFocus() { const myTimeout = setTimeout(searchBarFocus, 0); function searchBarFocus() { document.getElementById("gcse-search-input").focus(); } } </script>  <nav> <div class="header-main__wrapper"> <a class="gfg-stc" style="top:0" href="#main">Skip to content</a> <a href="https://www.geeksforgeeks.org/" aria-label="Logo" class="header-main__logo"> <div class="_logo">  <img class="gfg_logo_img" style="height: 30px; width: 80px; max-width: fit-content;" src="https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="geeksforgeeks"> </div> </a> <div class="header-main__container">   <ul class="header-main__list"><li class="header-main__list-item Header_1" data-parent="false" aria-expanded="true" data-expandable="true">Courses<ul class="mega-dropdown Screen_1"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/dsa-to-development-coding-guide?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">DSA to Development</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/data-science-live?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Machine Learning & Data Science</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/mastering-generative-ai-and-chat-gpt?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Generative AI & ChatGPT</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/search?query=AWS&itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Become AWS Certified</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">DSA Courses<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/dsa-self-paced?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Data Structure & Algorithm(C++/JAVA)</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/Data-Structures-With-Python?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Data Structure & Algorithm(Python)</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/data-structures-and-algorithms-in-javascript?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Data Structure & Algorithm(JavaScript)</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Programming Languages<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/cpp-programming-basic-to-advanced?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">CPP</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/Java-Programming-basic-to-advanced?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Java</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/Python-Foundation?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Python</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/javascript?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">JavaScript</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/c-Programming-basic-to-advanced?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">C</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">All Courses</a></li></ul></li><li class="header-main__list-item Header_2" data-parent="false" aria-expanded="true" data-expandable="true">Tutorials<ul class="mega-dropdown Screen_1"><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Python<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-programming-language-tutorial/?ref=outind" target="_self">Python Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-programming-examples/?ref=outind" target="_self">Python Programs</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-quizzes/?ref=outind" target="_self">Python Quiz</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-projects-beginner-to-advanced/?ref=outind" target="_self">Python Projects</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-interview-questions/?ref=outind" target="_self">Python Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-data-structures-and-algorithms/?ref=outind" target="_self">Python Data Structures</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Java<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java/?ref=outind" target="_self">Java Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/collections-in-java-2/?ref=outind" target="_self">Java Collections</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java-8-features/?ref=outind" target="_self">Java 8 Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java-programming-examples/?ref=outind" target="_self">Java Programs</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java-multiple-choice-questions/?ref=outind" target="_self">Java Quiz</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java-projects/?ref=outind" target="_self">Java Projects</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java-interview-questions/?ref=outind" target="_self">Java Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/advanced-java/?ref=outind" target="_self">Advanced Java</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Programming Languages<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/javascript/?ref=outind" target="_self">JavaScript</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/c-plus-plus/?ref=outind" target="_self">C++</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/r-tutorial/?ref=outind" target="_self">R Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/sql-tutorial/?ref=outind" target="_self">SQL</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/php-tutorial/?ref=outind" target="_self">PHP</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/csharp-programming-language/?ref=outind" target="_self">C#</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/c-programming-language/?ref=outind" target="_self">C</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/scala-programming-language/?ref=outind" target="_self">Scala</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/perl-programming-language/?ref=outind" target="_self">Perl</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/golang/?ref=outind" target="_self">Go Language</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/kotlin-programming-language/?ref=outind" target="_self">Kotlin</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><a href="https://www.geeksforgeeks.org/data-structures/?ref=ghm" class="remove-anchor__decoration" target="_self" style="display: inline-flex; padding: 0;">System Design</a><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/system-design-tutorial/?ref=ghm" target="_self">System Design Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/software-design-patterns/?ref=outind" target="_self">Software Design Patterns</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/complete-roadmap-to-learn-system-design/?ref=outind" target="_self">System Design Roadmap</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-10-system-design-interview-questions-and-answers/?ref=outind" target="_self">Top 10 System Design Interview Questions and Answers</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Interview Corner<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/company-preparation/?ref=outind" target="_self">Company Preparation</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/interview-preparation-for-software-developer/?ref=outind" target="_self">Top Topics</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://practice.geeksforgeeks.org/company-tags/?ref=outind" target="_self">Practice Company Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/company-interview-corner/?ref=outind" target="_self">Interview Experiences</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/experienced-interview-experiences-company-wise/?ref=outind" target="_self">Experienced Interviews</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/internship-interview-experiences-company-wise/?ref=outind" target="_self">Internship Interviews</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/?ref=outind" target="_self">Competitive Programming</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/quiz-corner-gq/?ref=outind" target="_self">Multiple Choice Quizzes</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/aptitude-questions-and-answers/?ref=outind" target="_self">Aptitude for Placements</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Computer Science Subjects<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/operating-systems/?ref=outind" target="_self">Operating System</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/dbms/?ref=outind" target="_self">DBMS</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/computer-network-tutorials/?ref=outind" target="_self">Computer Networks</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/engineering-mathematics-tutorials/?ref=outind" target="_self">Engineering Mathematics</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/computer-organization-and-architecture-tutorials/?ref=outind" target="_self">Computer Organization and Architecture</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/theory-of-computation-automata-tutorials/?ref=outind" target="_self">Theory of Computation</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/compiler-design-tutorials/?ref=outind" target="_self">Compiler Design</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/digital-electronics-logic-design-tutorials/#blg/?ref=outind" target="_self">Digital Logic</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/software-engineering/?ref=outind" target="_self">Software Engineering</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">DevOps<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/git-tutorial/?ref=outind" target="_self">GIT</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/aws-tutorial/?ref=outind" target="_self">AWS</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/docker-tutorial/?ref=outind" target="_self">Docker</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/kubernetes-tutorial/?ref=outind" target="_self">Kubernetes</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/microsoft-azure/?ref=outind" target="_self">Microsoft Azure Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/google-cloud-platform-tutorial/?ref=outind" target="_self">Google Cloud Platform</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Linux<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linux-tutorial/?ref=outind" target="_self">Linux Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linux-commands/?ref=outind" target="_self">Linux Commands A-Z</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linux-commands-cheat-sheet/?ref=outind" target="_self">Linux Commands Cheatsheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/permissions-in-linux/?ref=outind" target="_self">File Permission Commands</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/beginners-guide-to-linux-system-administration/?ref=outind" target="_self">Linux System Administration</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linux-file-system/?ref=outind" target="_self">Linux File System</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-linux-shell-shell-scripting/?ref=outind" target="_self">Linux Shell Scripting</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/network-configuration-trouble-shooting-commands-linux/?ref=outind" target="_self">Linux Networking</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linux-interview-questions/?ref=outind" target="_self">Linux Interview Questions</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Software Testing<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/software-testing-tutorial/?ref=outind" target="_self">Software Testing Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/software-engineering/?ref=outind" target="_self">Software Engineering Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/software-testing-interview-questions/?ref=outind" target="_self">Testing Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/jira-tutorial/?ref=outind" target="_self">Jira</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Databases<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/dbms/?ref=outind" target="_self">DBMS Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/sql-tutorial/?ref=outind" target="_self">SQL Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/postgresql-tutorial/?ref=outind" target="_self">PostgreSQL Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/mongodb-tutorial/?ref=outind" target="_self">MongoDB Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/sql-interview-questions/?ref=outind" target="_self">SQL Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/mysql-interview-questions/?ref=outind" target="_self">MySQL Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/pl-sql-interview-questions/?ref=outind" target="_self">PL/SQL Interview Questions</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Android<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/android-tutorial/?ref=outind" target="_self">Android Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/android-studio-tutorial/?ref=outind" target="_self">Android Studio Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/kotlin-android-tutorial/?ref=outind" target="_self">Kotlin For Android</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/android-projects-from-basic-to-advanced-level/?ref=outind" target="_self">Android Projects</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-50-android-interview-questions-answers-sde-i-to-sde-iii/?ref=outind" target="_self">Android Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/6-weeks-of-android-app-development-free-project-based-learning/?ref=outind" target="_self">6 Weeks of Android App Development</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Excel<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/excel-tutorial/?ref=outind" target="_self">MS Excel Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-ms-excel/?ref=outind" target="_self">Introduction to MS Excel</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/data-analysis-in-excel/?ref=outind" target="_self">Data Analysis in Excel</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/basic-excel-formulas-and-functions/?ref=outind" target="_self">Basic Excel Formulas & Functions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/instant-data-analysis-in-advanced-excel/?ref=outind" target="_self">Data Analysis in Advanced Excel</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/workbooks-in-microsoft-excel/?ref=outind" target="_self">Workbooks</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/statistical-functions-in-excel-with-examples/?ref=outind" target="_self">Statistical Functions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/data-visualization-in-excel/?ref=outind" target="_self">Data Visualization in Excel</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/pivot-tables-in-excel/?ref=outind" target="_self">Pivot Tables in Excel</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/working-with-excel-spreadsheets-in-python/?ref=outind" target="_self">Excel Spreadsheets in Python</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/basic-excel-shortcuts/?ref=outind" target="_self">Basic Excel Shortcuts</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Mathematics<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/number-theory/?ref=outind" target="_self">Number System</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/algebra/?ref=outind" target="_self">Algebra</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linear-algebra/?ref=outind" target="_self">Linear Algebra</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/math-trigonometry/?ref=outind" target="_self">Trigonometry</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/set-theory/?ref=outind" target="_self">Set Theory</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/statistics/?ref=outind" target="_self">Statistics</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/probability-in-maths/?ref=outind" target="_self">Probability</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/geometry/?ref=outind" target="_self">Geometry</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/mensuration/?ref=outind" target="_self">Mensuration</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/logarithms/?ref=outind" target="_self">Logarithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/math-calculus/?ref=outind" target="_self">Calculus</a></li></ul></li></ul></li><li class="header-main__list-item Header_3" data-parent="false" aria-expanded="true" data-expandable="true">DSA<ul class="mega-dropdown Screen_1"><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Data Structures<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/array-data-structure-guide/?ref=outind" target="_self">Arrays</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/matrix/?ref=outind" target="_self">Matrix</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/string-data-structure/?ref=outind" target="_self">Strings</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-linked-list-data-structure/?ref=ghm" target="_self">Linked List</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/stack-data-structure/?ref=outind" target="_self">Stack</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/queue-data-structure/?ref=outind" target="_self">Queue</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-tree-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Tree</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/heap-data-structure/?ref=outind" target="_self">Heap</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/hashing-data-structure/?ref=outind" target="_self">Hashing</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/graph-data-structure-and-algorithms/?ref=outind" target="_self">Graph</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-set-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Set Data Structure</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-map-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Map Data Structure</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/advanced-data-structures/?ref=outind" target="_self">Advanced Data Structure</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-data-structures/?ref=outind" target="_self">Data Structures Tutorial</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Algorithms<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Analysis of Algorithms<ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/design-and-analysis-of-algorithms/?ref=outind" target="_self">Design and Analysis of Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/asymptotic-notation-and-analysis-based-on-input-size-of-algorithms/?ref=outind" target="_self">Asymptotic Analysis</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/types-of-asymptotic-notations-in-complexity-analysis-of-algorithms/?ref=outind" target="_self">Asymptotic Notations</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/worst-average-and-best-case-analysis-of-algorithms/?ref=outind" target="_self">Worst, Average and Best Cases</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Searching Algorithms<ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linear-search/?ref=outind" target="_self">Linear Search</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/binary-search/?ref=outind" target="_self">Binary Search</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/searching-algorithms/?ref=outind" target="_self">Searching Algorithms Tutorial</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Sorting Algorithms<ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/selection-sort/?ref=outind" target="_self">Selection Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/bubble-sort/?ref=outind" target="_self">Bubble Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/insertion-sort/?ref=outind" target="_self">Insertion Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/merge-sort/?ref=outind" target="_self">Merge Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/quick-sort/?ref=outind" target="_self">Quick Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/heap-sort/?ref=outind" target="_self">Heap Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/counting-sort/?ref=outind" target="_self">Counting Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/radix-sort/?ref=outind" target="_self">Radix Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/bucket-sort-2/?ref=outind" target="_self">Bucket Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-sorting-algorithm/?ref=outind" target="_self">Sorting Algorithms Tutorial</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-greedy-algorithm-data-structures-and-algorithm-tutorials/?ref=outind" target="_self">Greedy Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-dynamic-programming-data-structures-and-algorithm-tutorials/?ref=outind" target="_self">Dynamic Programming</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-graphs-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Graph Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-pattern-searching-data-structure-and-algorithm-tutorial/?ref=outind" target="_self">Pattern Searching</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-recursion-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Recursion</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-backtracking-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Backtracking</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-divide-and-conquer-algorithm-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Divide and Conquer</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/mathematical-algorithms/?ref=outind" target="_self">Mathematical Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/geometric-algorithms/?ref=outind" target="_self">Geometric Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-bitwise-algorithms-data-structures-and-algorithms-tutorial/?ref=outind" target="_self">Bitwise Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/randomized-algorithms/?ref=outind" target="_self">Randomized Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-branch-and-bound-data-structures-and-algorithms-tutorial/?ref=outind" target="_self">Branch and Bound</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-algorithms/?ref=outind" target="_self">Algorithms Tutorial</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/learn-data-structures-and-algorithms-dsa-tutorial/?ref=outind" target="_self">DSA Tutorial</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Practice<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sortBy=submissions&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">All DSA Problems</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/problem-of-the-day?itm_source=geeksforgeeksitm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Problem of the Day</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Company Wise Coding Practice<ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&company=Amazon&sortBy=submissions&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Amazon</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&company=Microsoft&sortBy=submissions&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Microsoft</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&company=Flipkart&sortBy=submissions&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Flipkart</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sortBy=submissions&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Explore All</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&curated[]=1&sortBy=submissions&curated_names[]=SDE Sheet?itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">GfG SDE Sheet</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Practice Problems Difficulty Wise<ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&difficulty=School&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">School</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&difficulty=Basic&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Basic</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&difficulty=Easy&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Easy</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&difficulty=Medium&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Medium</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&difficulty=Hard&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Hard</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Language Wise Coding Practice<ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&category=CPP&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">CPP</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&category=Java&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Java</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?category=python&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Python</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Curated DSA Lists<ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sprint=ca8ae412173dbd8346c26a0295d098fd&sortBy=submissions&sprint_name=Beginner's DSA Sheet&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Beginner's DSA Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sprint=50746f92a895c22a50504ac0c1fb9c84&sortBy=submissions&sprint_name=Top 50 Array Problems&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Top 50 Array Problems</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sprint=57184072610b884e5df3584cc534115d&sortBy=submissions&sprint_name=Top 50 String Problems&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Top 50 String Problems</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sprint=93d672753b74440c7427214c8ebf866d&sortBy=submissions&sprint_name=Top 50 DP Problems&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Top 50 DP Problems</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sprint=405e9db0f353691ad3b2d546b19145e9&sortBy=submissions&sprint_name=Top 50 Graph Problems&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Top 50 Graph Problems</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sprint=5f24de84b65bf7c4f4399c8111e26b81&sortBy=submissions&sprint_name=Top 50 Tree Problems&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Top 50 Tree Problems</a></li></ul></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/?ref=outind" target="_self">Competitive Programming</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Company Wise SDE Sheets<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/facebookmeta-sde-sheet-interview-questions-and-answers/?ref=outind" target="_self">Facebook SDE Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/amazon-sde-sheet-interview-questions-and-answers/?ref=outind" target="_self">Amazon SDE Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/apple-sde-sheet-interview-questions-and-answers/?ref=outind" target="_self">Apple SDE Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/netflix-sde-sheet-interview-questions-and-answers/?ref=outind" target="_self">Netflix SDE Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/google-sde-sheet-interview-questions-and-answers/?ref=outind" target="_self">Google SDE Sheet</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">DSA Cheat Sheets<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/sde-sheet-a-complete-guide-for-sde-preparation/?ref=outind" target="_self">SDE Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/most-asked-dsa-interview-problems-for-beginners/?ref=outind" target="_self">DSA Sheet for Beginners</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/must-do-coding-questions-for-companies-like-amazon-microsoft-adobe/?ref=outind" target="_self">FAANG Coding Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/must-do-coding-questions-for-product-based-companies/?ref=outind" target="_self">Product-Based Coding Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/must-coding-questions-company-wise/?ref=outind" target="_self">Company-Wise Preparation Sheet</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-100-data-structure-and-algorithms-dsa-interview-questions-topic-wise/?ref=outind" target="_self">Top Interview Questions</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Puzzles<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/puzzles/?ref=outind" target="_self">All Puzzles</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-100-puzzles-asked-in-interviews/?ref=outind" target="_self">Top 100 Puzzles Asked In Interviews</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-20-puzzles-commonly-asked-during-sde-interviews/?ref=outind" target="_self">Top 20 Puzzles Commonly Asked During SDE Interviews</a></li></ul></li></ul></li><li class="header-main__list-item Header_4" data-parent="false" aria-expanded="true" data-expandable="true">Data Science<ul class="mega-dropdown Screen_1"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-programming-language/?ref=outind" target="_self">Python Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/r-tutorial/?ref=outind" target="_self">R Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/machine-learning/?ref=outind" target="_self">Machine Learning</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/data-science-with-python-tutorial/?ref=outind" target="_self">Data Science using Python</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/r-programming-for-data-science/?ref=outind" target="_self">Data Science using R</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Data Science Packages<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/pandas-tutorial/?ref=outind" target="_self">Pandas Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/numpy-tutorial/?ref=outind" target="_self">NumPy Tutorial</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Data Visualization<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-data-visualization-tutorial/?ref=outind" target="_self">Python Data Visualization Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/data-visualization-in-r/?ref=outind" target="_self">Data Visualization with R</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Data Analysis<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/data-analysis-with-python/?ref=outind" target="_self">Data Analysis with Python</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/data-analysis-using-r/?ref=outind" target="_self">Data Analysis with R</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/deep-learning-tutorial/?ref=outind" target="_self">Deep Learning</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/natural-language-processing-nlp-tutorial/?ref=outind" target="_self">NLP Tutorial</a></li></ul></li><li class="header-main__list-item Header_5" data-parent="false" aria-expanded="true" data-expandable="true">Web Tech<ul class="mega-dropdown Screen_1"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/html-tutorial/?ref=outind" target="_self">HTML Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/css-tutorial/?ref=outind" target="_self">CSS Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/javascript/?ref=outind" target="_self">JavaScript Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/php-tutorial/?ref=outind" target="_self">PHP Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/react-tutorial/?ref=outind" target="_self">ReactJS Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/nodejs/?ref=outind" target="_self">NodeJS Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/bootstrap/?ref=outind" target="_self">Bootstrap Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/typescript/?ref=outind" target="_self">Typescript</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Web Development Using Python<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Django<ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/django-tutorial/?ref=outind" target="_self">Django Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-django-projects-for-beginners/?ref=outind" target="_self">Django Projects</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/django-interview-questions/?ref=outind" target="_self">Django Interview Questions</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Flask<ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/flask-tutorial/?ref=outind" target="_self">Flask Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/flask-projects/?ref=outind" target="_self">Flask Projects</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/flask-interview-questions-and-answers/?ref=outind" target="_self">Flask Interview Questions</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/postman-tutorial/?ref=outind" target="_self">Postman</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-github/?ref=outind" target="_self">Github</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true">Cheat Sheets<ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/html-cheat-sheet-a-basic-guide-to-html/?ref=outind" target="_self">HTML Cheat Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/css-cheat-sheet-a-basic-guide-to-css/?ref=outind" target="_self">CSS Cheat Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/javascript-cheat-sheet-a-basic-guide-to-javascript/?ref=outind" target="_self">JavaScript Cheat Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/react-cheat-sheet/?ref=outind" target="_self">React Cheat Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/angular-cheat-sheet-a-basic-guide-to-angular/?ref=outind" target="_self">Angular Cheat Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/jquery-cheat-sheet-a-basic-guide-to-jquery/?ref=outind" target="_self">jQuery Cheat Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/bootstrap-cheatsheet-a-basic-guide-to-bootstrap/?ref=outind" target="_self">Bootstrap Cheat Sheet</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/web-development/?ref=outind" target="_self">Learn Complete Web Development</a></li></ul></li></ul>  <ul class="header-main__left-list" data-nl="false"> <li class="header-main__left-list-item gcse-search_li p-relative" aria-expanded="false" data-expandable="false"> <div class="gcse-form-search-suggestion_wrapper"> <form id="gcse-form" class="gcse-form_class p-relative closeChatScreen" data-sm="false"> <input class="gcse-search-input__wrapper" id="gcse-search-input" aria-expanded="false" placeholder="Search..." autocomplete="off" /> <button aria-label="search" type="submit" class="gcse-search__btn not-expanded"> </button> </form> <div class="gfg-search-suggestion_wrapper" style="display:none"></div> <div> </li> <li> <div class="darkMode-wrap" data-mode="Switch to Dark Mode"> <button aria-label="toggle theme" data-gfg-action="toggleGFGTheme"> <div id="darkMode-wrap-red-dot" style="height:12px;width:12px;background-color:#EB2222;border-radius:999999px;position:absolute;top:4px;right:0;display:none;"></div> </button> </div> </li> <li class="header-main__left-list-item google-translate-parent-element" aria-expanded="false" data-expanded="true"> <div class="translate" id="g_translater"> <div id="google_translate_element" data-show="false"></div> </div>   </li> <li id="userProfileId" class="header-main__left-list-item p-relative" aria-expanded="false" data-expandable="false">  </li> </ul> </div>   </div> </nav> <div class="header-main__slider"> <button aria-label="sub header slider previous" class="header-main__slider-arrow previous hideIt"> </button>  <ul id="hslider"> <li><a href="https://www.geeksforgeeks.org/html-cheat-sheet-a-basic-guide-to-html/?ref=shm">HTML Cheat Sheet</a></li><li><a href="https://www.geeksforgeeks.org/css-cheat-sheet-a-basic-guide-to-css/?ref=shm">CSS Cheat Sheet</a></li><li><a href="https://www.geeksforgeeks.org/javascript-cheat-sheet-a-basic-guide-to-javascript/?ref=shm">JS Cheat Sheet</a></li><li><a href="https://www.geeksforgeeks.org/bootstrap-cheatsheet-a-basic-guide-to-bootstrap/?ref=shm">Bootstrap Cheat Sheet</a></li><li><a href="https://www.geeksforgeeks.org/jquery-cheat-sheet-a-basic-guide-to-jquery/?ref=shm">jQuery Cheat Sheet</a></li><li><a href="https://www.geeksforgeeks.org/angular-cheat-sheet-a-basic-guide-to-angular/?ref=shm">Angular Cheat Sheet</a></li><li><a href="https://www.geeksforgeeks.org/sde-sheet-a-complete-guide-for-sde-preparation/?ref=shm">SDE Sheet</a></li><li><a href="https://www.geeksforgeeks.org/facebookmeta-sde-sheet-interview-questions-and-answers/?ref=shm">Facebook SDE Sheet</a></li><li><a href="https://www.geeksforgeeks.org/amazon-sde-sheet-interview-questions-and-answers/?ref=shm">Amazon SDE Sheet</a></li><li><a href="https://www.geeksforgeeks.org/apple-sde-sheet-interview-questions-and-answers/?ref=shm">Apple SDE Sheet</a></li><li><a href="https://www.geeksforgeeks.org/netflix-sde-sheet-interview-questions-and-answers/?ref=shm">Netflix SDE Sheet</a></li><li><a href="https://www.geeksforgeeks.org/google-sde-sheet-interview-questions-and-answers/?ref=shm">Google SDE Sheet</a></li><li><a href="https://www.geeksforgeeks.org/wipro-sde-sheet-interview-questions-and-answers/?ref=shm">Wipro SDE Sheet</a></li><li><a href="https://www.geeksforgeeks.org/infosys-sde-sheet-interview-questions-and-answers/?ref=shm">Infosys SDE Sheet</a></li><li><a href="https://www.geeksforgeeks.org/tcs-sde-sheet-interview-questions-and-answers/?ref=shm">TCS SDE Sheet</a></li><li><a href="https://www.geeksforgeeks.org/cognizant-sde-sheet-interview-questions-and-answers/?ref=shm">Cognizant SDE Sheet</a></li><li><a href="https://www.geeksforgeeks.org/hcl-sde-sheet-interview-questions-and-answers/?ref=shm">HCL SDE Sheet</a></li><li><a href="https://www.geeksforgeeks.org/must-do-questions-for-companies-like-tcs-cts-hcl-ibm/?ref=shm">Mass Recruiters Sheet</a></li><li><a href="https://www.geeksforgeeks.org/must-do-coding-questions-for-product-based-companies/?ref=shm">Product-Based Coding Sheet</a></li><li><a href="https://www.geeksforgeeks.org/must-coding-questions-company-wise/?ref=shm">Company-Wise Practice Sheet</a></li><li><a href="https://www.geeksforgeeks.org/dsa-sheet-by-love-babbar/?ref=shm">Love Babbar Sheet</a></li> </ul> <button aria-label="sub header slider next" class="header-main__slider-arrow next hideIt"> </button> </div> <button id="scrollTopBtn" title="Scroll to Top" type="button" class="btn btn-success">▲</button>  <div id="main" class="wrapper single-page"> <script> if(post_slug.includes('premium-plans-payment/') || post_slug.includes('premium-plans/')){ $(".header-main__slider").remove(); } //getting tags for the page type data let mobileView = false; let pageTags = JSON.parse('null'); let allTags = JSON.parse('{"0":"AngularJS","1":"WebTechnologies","3":"GFGSheets","4":"WebDevSheet"}'); </script> <script> window.have_dsa_term = false; // var practiceTab = ; </script> <style> .wrapper { flex-direction: column !important; } /* spinner css */ @keyframes spinner { to {transform: rotate(360deg);} } .spinner:before { content: ''; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; border-radius: 50%; border: 2px solid #ccc; border-top-color: #000; animation: spinner .6s linear infinite; } .report-loader{ position: relative; } .report-loader.spinner{ margin-left: 16px; } .badges{ display: flex; align-items: center; position: relative; } .badges .gfg-badge-icon.md::after{ transform: scale(0.25); position:relative; top: 2px; left: -2px; } .sep{ margin: 0px 5px; font-size: 20px; color: var(--badge-name-color); } .pub-count{ font-size: 14px; font-family: var(--font-secondary); } .badge-details{ display:none; } .badges{ cursor: pointer; position: relative; /* width: 0px; height: 20px; top: -32px; */ } .badge-icon{ display: flex; align-items: center; } .badge-content{ margin-left: 9px; } .badge-name{ color: var(--badge-nam-color); font-weight: 600; font-size: 16px; text-transform: capitalize; } .badge-data{ color: #A5A4A4; font-size: 10px; } .badges:hover .badge-details{ display: block; background: var(--badge-bg); padding: 10px 18px 10px 18px; position: absolute; width: 175px; top: -10px; z-index: 10; left: 112%; box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px; border-radius: 5px; /* transform-origin: top right; */ } .badge-details::before { content: ""; position: absolute; transform: rotate(90deg); /* transform-origin: right; */ left: -6px; top: 50%; margin-left: -17px; border-width: 12px; border-style: solid; border-color: var(--badge-bg) transparent transparent transparent; margin-top: -12px; } .badge-icon .icon{ border: 1px solid var(--icon-border-color); padding: 4px 3px; border-radius: 4px; width: 22px; height: 24px; position: relative; } .b-icon-pos{ position: relative; top: -34px; left: -34px; } /* article viewer */ .article--viewer .a-wrapper{ margin-top: 0px !important; } .content{ padding-top: 10px !important; } .u-name{ font-size: 14px; } .article--viewer_content .a-wrapper .content{ padding-bottom: 10px !important; } .likeTooltipBottom{ font-size: 14px; } @media (max-width: 434px) { .article-buttons.show-bg{ margin-top: 56px !important; } } @media (max-width: 730px), ((min-width: 992px) and (max-width:1100px)) { .article--viewer .media{ position: relative; } .article--viewer .media{ margin-bottom: 0px !important; } .badges:hover .badge-details{ top: -56px; left: 62px; } .badge-details::before{ transform: rotate(0deg); left: 10%; top: 117%; } .article-buttons.show-bg{ margin-top: 22px; top: 0px !important; } } @media ((min-width:731px) and (max-width:1223px)) { .article-buttons.show-bg{ top: 18px; } } @media ((min-width:993px) and (max-width:1190px)) { .article--viewer .media{ position: relative; } .article--viewer .media{ margin-bottom: 25px !important; } } </style>  <script> function getCookie(name) { function escape(s) { return s.replace(/([.*+?\^$(){}|\[\]\/\\])/g, '\\$1'); } var match = document.cookie.match(RegExp('(?:^|;\\s*)' + escape(name) + '=([^;]*)')); return match ? match[1] : null; } </script>    <div id='openInApp-modal' class='openInApp'> <a href = 'https://geeksforgeeksapp.page.link/?link=https://www.geeksforgeeks.org/angular-cheat-sheet-a-basic-guide-to-angular/?type%3Darticle%26id%3D880936&apn=free.programming.programming&isi=1641848816&ibi=org.geeksforgeeks.GeeksforGeeksDev&efr=1' class='openInAppLink'> Open In App </a> </div> <script> var consentValue = localStorage.getItem("gfg_cc"); var isIOS = !!navigator.platform && /iPad|iPhone|iPod|MacIntel/.test(navigator.platform) && navigator.maxTouchPoints > 0; const isSafari = navigator.userAgent.indexOf("Safari") > -1; const isMozilla = navigator.userAgent.indexOf("Mozilla") > -1; if(consentValue){ if(window.innerHeight > window.innerWidth && navigator.maxTouchPoints > 1 && (isSafari || isMozilla || navigator.userAgentData.mobile)){ $('.openInApp').css({ display: "block" }); $('#scrollTopBtn').css({ bottom: "44px" }); //adding a new class to check stats for clicks on iOS and Android isIOS ? jQuery('.openInAppLink').addClass("oia-iOS") : $('.openInAppLink').addClass("oia-android"); //for openInApp Link } } </script> <style> .openInApp{ display: none; bottom: 0px; width: 100%; position: fixed; z-index: 1025; opacity: 0.93; } .openInAppLink{ height: 44px; background: var(--color-gfg); font-weight: bold; display: block; text-align: center; padding: 12px; font-size: large; } .openInAppLink, .openInAppLink:hover, .openInAppLink:active, .openInAppLink:visited, .openInAppLink:focus { text-decoration:none; } </style>  <script> companyTagsArray = JSON.parse('[]'); categoryTagsArray = JSON.parse('[]'); </script> <div class="container-fluid bg-light" id="home-page" style="position: relative; max-width:100%;"> <div class="article-page_flex"> <div class="sidebar_wrapper manual_leftbar "> <a href="https://www.geeksforgeeks.org/bootstrap-cheatsheet-a-basic-guide-to-bootstrap/?ref=next_article_top" class="next_article_leftbar_container"> <div class="next_article_leftbar_content"> Next Article: <div class="next_article_title">Bootstrap Cheat Sheet - A Basic Guide to Bootstrap</div> </div> <img src="https://media.geeksforgeeks.org/auth-dashboard-uploads/ep_right.svg" alt="Next article icon" /> </a> <div class="sideBar " style="height: unset !important">  <div class="sideBar--wrap newLeftbar "> <div id="GFG_AD_Leftsidebar_300x250_chained_1"></div> <div id="GFG_AD_Leftsidebar_300x250_chained_2"></div> <div id="GFG_AD_Leftsidebar_300x250_chained_3"></div> <div id="GFG_AD_Leftsidebar_300x600_chained_1"></div> </div> </div> <div id="GFG_AD_Desktop_LeftSideBar_Docked_160x600" style="max-width:160px; max-height:600px"></div> </div> <div class="leftBar"> <div class="article--viewer"> <div class="article--viewer_content"> <div class="a-wrapper"> <div class="" style="z-index:9999 !important;position:relative;"> </div> <article class="content post-880936 post type-post status-publish format-standard hentry category-angular-js category-web-technologies tag-gfg-sheets tag-web-dev-sheet" id="post-880936">  <div class="main_wrapper" style="display:flex;"> <div style="width: 100%;"> <div class="article-title"> <h1>Angular Cheat Sheet – A Basic Guide to Angular</h1> </div> <div class="last_updated_parent"> <div> Last Updated : 20 Mar, 2024 </div>  <div class="three_dot_dropdown"> <div style="display: flex;"> <div pid="880936" ptitle="Angular Cheat Sheet – A Basic Guide to Angular" class="top-summary-icon-div "> <div class="three_dot_dropdown_div tooltip"> Summarize <div class="summarize_header"> </div> </div> </div> <div pid="880936" ptitle="Angular Cheat Sheet – A Basic Guide to Angular" class="article--viewer_comment tooltip top-comment-icon-div"> Comments <div class="three_dot_dropdown_div" data-gfg-action='loadComments'> <div class="comment_header"> </div> </div> </div> <div pid="880936" ptitle="Angular Cheat Sheet – A Basic Guide to Angular" class="article--viewer_improve tooltip"> Improve <div class="three_dot_dropdown_div three_dot_dropdown_improve" onclick="improveArticleCall()"> <div class="improve_wrapper_top"> </div> </div>  </div>  <ul class="dropbtn icons btn-right showLeft" onclick="showDropdown()"> <li> </li> <li></li> <li></li> </ul> </div> </div> </div> </div> </div>  <div id="myDropdown" class="three_dot_dropdown_content"> <div class="article-buttons drop" onmouseleave="closeKebabMenu()">  <div pid="880936" ptitle="Angular Cheat Sheet – A Basic Guide to Angular" class="improve_article--viewer tooltip"> <div class="three_dot_dropdown_div three_dot_dropdown_improve" onclick="suggestionArticleCall()" style="margin-top: 1px;"> <div class="three_dot_dropdown_inner_div improve_dot_dropdown_inner_div"> Suggest changes </div> </div> </div> <div pid="880936" class="article--viewer_like tooltip"> <div class="three_dot_dropdown_div three_dot_dropdown_likearticle" onmouseleave='toggleLikeElementVisibility("showLikesContainer", false)' onmouseenter='toggleLikeElementVisibility("showLikesContainer", true)'> <div class="showLikesContainer"> Like Article </div> <div class="three_dot_dropdown_inner_div" data-gfg-action="like-article" data-bookmark-value="0"> Like </div> </div>  </div> <div pid="880936" class="article--viewer_share tooltip"> <div class="three_dot_dropdown_div three_dot_dropdown_share" onmouseleave="closeShareModal()" onmouseenter="openShareModal()"> <div style="display: flex;align-items: center;" class="three_dot_dropdown_inner_div" data-gfg-action="share-article" data-bookmark-value="0"> Share </div> </div> </div> <div class="article--viewer_report tooltip"> <div class="three_dot_dropdown_div three_dot_dropdown_reportarticle"> <div class="three_dot_dropdown_inner_div" data-gfg-action="report-article" onclick="report_article();"> Report </div> </div>  </div> <div class="article--viewer_Gnews tooltip"> <a class="three_dot_dropdown_inner_div Gnews_wrapper" href ='https://news.google.com/publications/CAAqBwgKMLTrzwsw44bnAw?hl=en-IN&gl=IN&ceid=IN%3Aen' target="_blank"> <img class="gfg-icon_Gnews no-zoom-in-cursor" src=https://media.geeksforgeeks.org/auth-dashboard-uploads/Google-news.svg loading="lazy" alt="News"></img> Follow </a> </div> </div> </div> <div class="text"> <a href="https://www.geeksforgeeks.org/angularjs/" rel="noopener" target="_blank">Angular</a> is a client-side TypeScript-based, front-end web framework developed by the Angular Team at Google, that is mainly used to develop scalable <a href="https://www.geeksforgeeks.org/what-is-spa-single-page-application-in-angularjs/">single-page web applications(SPAs)</a> for mobile & desktop. Angular is a great, reusable UI (User Interface) library for developers that helps in building attractive, steady, and utilitarian web pages and web applications. It is a continuously growing and expanding framework that provides better ways for developing web applications. It changes the static HTML to dynamic HTML. Its features like dynamic binding and dependency injection eliminate the need for code that we have to write otherwise. <div id="GFG_AD_gfg_mobile_336x280" style="margin: 5px 0;"></div> <a href="https://www.geeksforgeeks.org/introduction-to-typescript/">TypeScript</a> is a Strict Super Set of JavaScript, which means anything that is implemented in JavaScript can be implemented using TypeScript. <div style="width: 810px" class="wp-caption alignnone"><img alt="Angular Cheat Sheet" height="435" src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220919122049/Angular-Cheat-Sheet.jpg" width="1000"/>Angular Cheat Sheet</div><h2 id="what-is-angular-cheat-sheet">What is Angular Cheat Sheet?</h2>The Angular Cheat Sheet will give quick ideas related to the topics like Basics, Lifecycle Hooks, Components & Modules, Directives, Decorators, Angular Forms, Pipes, Services, Routing & many more, which will provide you a gist of Angular with their basic implementation. The purpose of the Cheat Sheet is to provide you with the content at a glance with some quick accurate ready-to-use code snippets that will help you to build a fully-functional web application. <div id="table_of_content">Table of Content <ul><li key="2"><a href="#angular-introduction">Angular Introduction</a></li><li key="3"><a href="#creating-a-new-angular-project">Creating a New Angular Project</a></li><li key="4"><a href="#angular-fundamental">Angular Fundamental</a></li><li key="5"><a href="#data-bindings">Data Bindings</a></li><li key="6"><a href="#angular-forms">Angular Forms</a></li><li key="7"><a href="#angular-pipes">Angular Pipes</a></li><li key="8"><a href="#services-dependency-injection">Services & Dependency Injection</a></li><li key="9"><a href="#routing">Routing</a></li></ul></div><h2 id="table-of-content"></h2><h2 id="angular-introduction">Angular Introduction</h2>Angular is a component-based application design framework, build on Typescript, for creating a sophisticated & a scalable single-page web application that has a well-integrated collection of libraries that helps to develop the code in module-wise with an easy-to-update, debug module. In order to work with Angular, we must have node.js, <a href="https://www.geeksforgeeks.org/node-js-npm-node-package-manager/">Node Package Manager(NPM)</a> & Angular CLI installed in the system. <div id="GFG_AD_Desktop_InContent_ATF_336x280" style="text-align:center; max-height: 280px;"></div><div id="GFG_AD_gfg_mobile_336x280_1" style="margin: 5px 0;"></div> <blockquote>Please refer to the Installation of Node.js on <a href="https://www.geeksforgeeks.org/installation-of-node-js-on-windows/">Windows</a>/<a href="https://www.geeksforgeeks.org/installation-of-node-js-on-linux/">Linux</a>/<a href="https://www.geeksforgeeks.org/how-to-install-nodejs-on-macos/">Mac</a> article for the detailed installation procedure.<div id="_GFG_ABP_Incontent_728x90" style="text-align:center;"></div> </blockquote><h2 id="creating-a-new-angular-project">Creating a New Angular Project</h2>After successful installation of the node.js & npm, we need to install the Angular CLI, which is described below: Open the terminal/Command prompt & type the below command: <pre>npm install -g @angular/cli </pre>For checking the version of the node.js & angular CLI installed, type the below command in the cmd: <pre>node -v ng -v or ng --version </pre>Now, we will create the Angular application using the Angular CLI, as given below: <pre>ng new Project-Name </pre>You may navigate to any of the directories where you want to create the project.<div style="text-align:center;margin:20px 0; max-height: 280px;" id="GFG_AD_gfg_outstream_incontent"></div> Run the application: Navigate the folder where the project has been created & type the below command to run the app: <pre>cd Project-Name ng serve --open </pre>The ng serve command will launch the server & will open your browser to http://localhost:4200/. <h2>Boilerplate</h2>Example 1: This example illustrates the basic Angular web app. <gfg-tabs data-run-ide="false"> <gfg-tab slot="tab">HTML</gfg-tab> <gfg-panel slot="panel" data-code-lang="html"> <code class="language-html"><div class=highlight><pre> <div> <h1>{{name}}</h1> <h3>{{details}} </h3> </div> </pre></div></code> </gfg-panel> <gfg-tab slot="tab">CSS</gfg-tab> <gfg-panel slot="panel" data-code-lang="css"> <code class="language-css"><div class=highlight><pre>/* app.component.css */ div { text-align: center; font-family: Arial, Helvetica, sans-serif; } h1 { color: green; } </pre></div></code> </gfg-panel> <gfg-tab slot="tab">JavaScript</gfg-tab> <gfg-panel slot="panel" data-code-lang="javascript"> <code class="language-javascript"><div class=highlight><pre>// app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { name = 'GeeksforGeeks'; details = 'A Computer Science portal for geeks'; } </pre></div></code> </gfg-panel> <gfg-tab slot="tab">JavaScript</gfg-tab> <gfg-panel slot="panel" data-code-lang="javascript"> <code class="language-javascript"><div class=highlight><pre>//app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } </pre></div></code> </gfg-panel></gfg-tabs> <h2 id="angular-fundamental">Angular Fundamental</h2>This section will cover the Components, Creation of Components, Lifecycle of the Component, and various directives provided by Angular & lastly, we will discuss the Decorator. The Component is the basic building block for developing UI for any Angular app, which contains the tree of Angular Component. The Directives are the subset for the components, where the Components are always associated with the template. Only a single Component would be instantiated for a given element in the template. The Components should belong to the NgModule, which helps to avail the component to another component or application. In order to do this, the component should be listed in the declarations field of the NgModule metadata.聽 <h3>Creating Component:</h3>The Angular application is composed of a different set of components, where every component has different roles & functionality that is designed to perform the specific task. The Components can be created with the following command: <pre>ng generate component <component-name> </pre>Please refer to the <a href="https://www.geeksforgeeks.org/components-in-angular-8/">Components in Angular 8</a> article for further detailed descriptions.<div style="text-align:center;margin:20px 0;max-height:280px" id="GFG_AD_gfg_outstream_incontent-1"></div> <h3>Lifecycle Hooks of Component:</h3>Every Component has its own lifecycle, which will be started when Angular instantiates the particular Component class that renders the Component view along with the child view. It is basically timed methods that differ when and why they execute. These methods will be triggered with the change detection, i.e., depending upon the conditions, the corresponding cycle will be executed. Angular will constantly check when the data-bound properties changes & accordingly update both the view & the Component instances, as required. The order of the execution for these lifecycle hooks is important. The Component instance will be destroyed & will be removed its rendered templates from the DOM by Angular when the lifecycle ends. The different lifecycle hook methods for the Component are described below: <table><thead><tr><th><h4>Methods</h4></th><th><h4>Descriptions</h4></th><th><h4>Syntax</h4></th></tr></thead><tbody><tr><td>ngOnChanges() </td><td>Triggered when the Angular set or reset the data-bound input properties </td><td>export class AppComponent implements OnChanges { @Input() geeks: string; lifecycleCount: number = 20; ngOnChanges() { 聽 this.lifecycleCount–; } } </td></tr><tr><td><a href="https://www.geeksforgeeks.org/constructor-vs-ngoninit-in-angular/#:~:text=ngOnInit%3A%20ngOnInit%20is%20a%20lifecycle,or%20to%20set%20up%20subscriptions." rel="noopener" target="_blank">ngOnInit()</a> </td><td>Used to initialize the Component or Directive after Angular sets the initial display of data-bound properties and sets input properties. </td><td>export class AppComponent implements OnInit { @Input() geeks: string; lifecycleCount: number = 20; ngOnInit() { 聽聽this.lifecycleCount–; } } </td></tr><tr><td>ngDoCheck() </td><td>Called immediately after changes detected by ngOnChanges() and after the initial execution of ngOnInit(). </td><td>ngDoCheck() { 聽 console.log(++this.lifecycleCount); 聽 … 聽 } } </td></tr><tr><td>ngAfterContentInit() </td><td>Used to perform initialization after Angular projects external content into the component’s view. </td><td>ngAfterContentInit() { … } </td></tr><tr><td>ngAfterContentChecked() </td><td>ngAfterContentChecked() is utilized to perform checks after Angular checks the content projected into the component’s view. </td><td>ngAfterContentChecked() { … } </td></tr><tr><td>ngAfterViewInit() </td><td>ngAfterViewInit() is employed to execute logic after Angular initializes the component’s views and child views. </td><td>ngAfterViewInit() { … } </td></tr><tr><td>ngAfterViewChecked() </td><td>ngAfterViewChecked() is utilized to execute logic after Angular checks the component’s views and child views for changes. </td><td>ngAfterViewChecked() { … } </td></tr><tr><td>ngOnDestroy() </td><td>ngOnDestroy() is used to perform cleanup logic when the component is destroyed or removed from the DOM. </td><td>export class AppComponent { destroy: boolean = true; DataDestroy() { 聽 this.destroy = !this.destroy; } </td></tr></tbody></table><h3>Modules:</h3>Every Angular application contains the root module, called NgModules, which acts as the container for the cohesive block of code, that is specifically designed to that application domain, a workflow, or a closely related set of capabilities. It consists of the components, services, & other code files, whose scope is decided by the NgModules. The NgModules in the AppModule, reside in the app.module.ts file. The 聽@NgModule() class decorator is used to define the NgModule. It is a function that accepts one metadata object, whose properties describe the module. Some of the important properties are described below: <table><thead><tr><th><h4>Properties</h4></th><th><h4>Descriptions</h4></th></tr></thead><tbody><tr><td>declarations </td><td>The components, directives, and pipes will belong to this NgModule. </td></tr><tr><td>exports </td><td>It is a subset of declarations, which will be visible & usable should in the component templates of other NgModules. </td></tr><tr><td>imports </td><td>It depicts the other modules whose exported classes are required by the component templates declared in this NgModule </td></tr><tr><td>providers </td><td>It is the Creator of services, that is contributed to the global collection of services & becomes accessible in all parts of the application. </td></tr><tr><td>bootstrap </td><td>The root component hosts all other application views. The bootstrap property should be set by the root NgModule only. </td></tr></tbody></table>The data can be shared between the parent component and one or more child components by implementing the @Input() and @Output() decorators, which provide the child component a way to communicate with its parent component. The @Input() decorator helps to update the data by the parent component in the child component, while the @Output() decorator helps to send the data by the child component to the parent component. <h3>Angular Template:</h3>The Template is a blueprint of the Angular application for developing the enhanced user interface, written in HTML & special syntax can be used within a template. Basically, each Template represents the section of the code on an HTML page that will be rendered in the browser with a lot more functionality. <div style="text-align:center;margin:20px 0;max-height:280px" id="GFG_AD_gfg_outstream_incontent-2"></div> While generating the application through the Angular CLI, the app.component.html will be the default template that will contain the HTML code. The Template Syntax helps to control the UX/UI by coordinating the data between the class and the template. Angular provides several template syntax, which is described below: <table><thead><tr><th><h4>Templates</h4></th><th><h4>Descriptions</h4></th><th><h4>Syntax</h4></th></tr></thead><tbody><tr><td><a href="https://www.geeksforgeeks.org/string-interpolation-in-angular-8/">Text Interpolation</a> </td><td>It displays component properties in the view template, allowing properties from the component class to be reflected in the template. </td><td>class=”{{variable_name}}”</td></tr><tr><td>Template Statement </td><td>Refers to event bindings or event handling mechanisms within the template syntax, allowing you to respond to user actions like clicks, input changes, etc. </td><td><element type=”button” (click)=”ChangeData()”>Delete</element></td></tr><tr><td>Binding </td><td>Binding in Angular connects the HTML template with the model, syncing the view and model. It facilitates communication between them, focusing on the target receiving the value and the template expression producing it. </td><td><element [(expression)]=”ClassName”></element></td></tr><tr><td>Pipes </td><td>It is used to transform the strings, currency amounts, dates, and other data, without affecting the actual content.聽 </td><td>{{ Expression | data }}</td></tr></tbody></table>We will learn about the various concepts of Binding & Pipes in more detail, in the underneath section. <h3>Directives: </h3>The Directive is generally a built-in class that includes the additional behavior to elements in the Angular Applications. There are 2 types of directives: <ul><li value="1">Attribute Directive: The Attribute Directive is used to modify the appearance or change the behavior of DOM elements & the components in Angular. In this case, the element, component, or another directive can be styled. The list of most commonly used attribute directives is:</li></ul><table><thead><tr><th><h4>Directives</h4></th><th><h4>Descriptions</h4></th><th><h4>Syntax</h4></th></tr></thead><tbody><tr><td><a href="https://www.geeksforgeeks.org/angularjs-ng-class-directive/">ngClass</a> </td><td>Built-in Angular directive used for dynamically adding or removing CSS classes from an HTML element based on certain conditions. </td><td><element [ng-class]=”expression”>聽 聽聽Contents…聽 </element> </td></tr><tr><td><a href="https://www.geeksforgeeks.org/what-is-ngstyle-in-angular-10/">ngStyle</a> </td><td>聽This directive is used to manipulate the styles for the HTML elements. It is a set of more than one style property, that is specified with colon-separated key-value pairs. </td><td><element [ngStyle] = “typescript_property”> </td></tr><tr><td><a href="https://www.geeksforgeeks.org/angular-forms-ngmodel-directive/">ngModel</a> </td><td>This directive is used to create a top-level form group Instance, and it binds the form to the given form value. </td><td><Input [(NgModel)= ‘name’]> </td></tr></tbody></table><ul><li value="1"><a href="https://www.geeksforgeeks.org/structural-directives-in-angular/">Structural Directive</a>: The Structural Directive is used to change the structure of the element or the component, i.e. it is used for modifying the structure of the DOM by applying or removing the elements from the DOM. The set of most commonly used built-in structural directives is:</li></ul><table><thead><tr><th><h4>Directives</h4></th><th><h4>Descriptions</h4></th><th><h4>Syntax</h4></th></tr></thead><tbody><tr><td><a href="https://www.geeksforgeeks.org/angular-10-ngif-directive/">NgIf</a> </td><td>This directive is used to remove or recreate a portion of an HTML element based on an expression. If the expression inside it is false then the element is removed and if it is true then the element is added to the DOM. </td><td><element *ngIf=’condition’></element> </td></tr><tr><td><a href="https://www.geeksforgeeks.org/angular10-ngfor-directive/">NgFor</a> </td><td>This directive is used to render each element for the given collection each element can be displayed on the page. </td><td><element *ngFor=’condition’></element> </td></tr><tr><td><a href="https://www.geeksforgeeks.org/angular10-ngswitch-directive/">NgSwitch</a> </td><td>This directive is used to specify the condition to show or hide the child elements. </td><td><element *NgSwitch=’condition’></element> </td></tr></tbody></table><h3>Decorators:</h3>The Decorators are the function that is called with the prefix @ symbol, immediately followed by the class, methods, or property. The Service, filter, or directive are allowed to be modified by the Decorators before they are utilized. It facilitates the metadata for configuration that decides how the components, function or class are to be processed, instantiated & utilized during the runtime. All the Decorators can be categorized in 2 ways & each type of Decorator contains its own subset of the decorators, which are described below: <ul><li value="1">Class Decorators: This decorator is facilitated by Angular having some class, which permits us to specify whether the particular class is a component or a module, along with permitting us to define this effect without having any code inside of it. For eg., the @Component that provides the metadata as part of the class & @NgModule clicks the widely used classes. </li></ul>Some other Class decorators are: <table><thead><tr><th><h4>Class Decorator</h4></th><th><h4>Descriptions</h4></th><th><h4>Syntax</h4></th></tr></thead><tbody><tr><td>import </td><td>This is usually used to import the Directives from the @angular/core. </td><td>import { NgModule } from ‘@angular/core’; </td></tr><tr><td>@Directive </td><td>It is used to define the class as the Directive & provides its metadata of it. </td><td>@Directive({ … }) </td></tr><tr><td>@Pipe </td><td>This is used to define the class as the Pipe, along with providing its metadata of it. </td><td>@Pipe({ 聽… }) </td></tr><tr><td>@Injectable </td><td>This is used to declare the class to be injected. When this is injected somewhere, the compiler can’t generate sufficient metadata that allows for the creation of the class appropriately, without having this decorator. </td><td>@Injectable({ 聽… }) </td></tr></tbody></table><ul><li value="1">Class Field Decorator: This is another category of Decorator, which can contain the following types:</li></ul><table><thead><tr><th><h4>Class Field Decorators</h4></th><th><h4>Descriptions</h4></th><th><h4>Syntax</h4></th></tr></thead><tbody><tr><td>Property decorator </td><td>This decorator can be utilized to decorate the particular properties declared inside the class. With this decorator, we can easily detect the purpose of using any particular property of the class. For eg., @Input(), @Output(), ReadOnly(), @Override() are most used property decorators. </td><td>class GFG { 聽@ReadOnly(‘check’)聽 聽name: string = ‘DSA’; } </td></tr><tr><td>Method Decorators </td><td>Method decorators like @HostListener and @HostBinding are used to decorate methods inside classes to add functionality, commonly linking host element properties with directive methods or binding host element properties with component properties. </td><td>export class AppComponent { 聽@HostListener(‘click’, [‘$event’]) 聽onHostClick(event: Event) { code… 聽} } </td></tr><tr><td>Parameter Decorator </td><td>This decorator is permitted to decorate the parameter in the class constructors. The commonly used decorator of this type is @Inject, which is used for injecting the services in the Angular Class.聽 </td><td>export class GFGExample{ 聽聽constructor(@Inject(gfgService) gfgServ) 聽聽console.log(gfgServ); 聽} </td></tr></tbody></table> <div style="text-align:center;margin:20px 0;max-height:280px" id="GFG_AD_gfg_outstream_incontent-3"></div> Example 2: This example describes the basic implementation of the Directives & the Decorators in Angular. <gfg-tabs data-run-ide="false"> <gfg-tab slot="tab">HTML</gfg-tab> <gfg-panel slot="panel" data-code-lang="html"> <code class="language-html"><div class=highlight><pre>  <div *ngIf="true" [ngClass]="'gfgclass'"> This text will be displayed  <h1 [ngStyle]="{'color':'#00FF00'}"> GFG Structural Directive Example </h1> </div> <hr>  <div *ngFor="let item of items"> <p> {{item}} </p> </div> <hr>  <div [ngSwitch]="'one'"> <div *ngSwitchCase="'one'">One is Displayed</div> <div *ngSwitchCase="'two'">Two is Displayed</div> <div *ngSwitchDefault>Default Option is Displayed</div> </div> <hr> <h1> GeeksforGeeks </h1> <hr> <h2>GeeksforGeeks</h2>  <input [(ngModel)]="gfg" #ctrl="ngModel" required> <p>Value: {{ gfg }}</p> <button (click)="setValue()">Set value</button> </pre></div></code> </gfg-panel> <gfg-tab slot="tab">JavaScript</gfg-tab> <gfg-panel slot="panel" data-code-lang="javascript"> <code class="language-javascript"><div class=highlight><pre>// app.component.ts File import { Component, VERSION } from "@angular/core"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], }) export class AppComponent { items = ["GfG 1", "GfG 2", "GfG 3", "GfG 4"]; gfg: string = ""; setValue() { this.gfg = "GeeksforGeeks"; } } </pre></div></code> </gfg-panel> <gfg-tab slot="tab">JavaScript</gfg-tab> <gfg-panel slot="panel" data-code-lang="javascript"> <code class="language-javascript"><div class=highlight><pre>// app.module.ts File import { NgModule } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { FormsModule } from "@angular/forms"; import { AppComponent } from "./app.component"; @NgModule({ imports: [BrowserModule, FormsModule], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule {} </pre></div></code> </gfg-panel></gfg-tabs> <h2 id="data-bindings">Data Bindings</h2><a href="https://www.geeksforgeeks.org/angularjs-data-binding/">Data Binding</a> is a technique to automatically synchronize the data between the model and view components. Angular implements data-binding that treats the model as the single source of truth in your application & for all the time, the view is a projection of the model. Unlike React, Angular supports two-way binding. In this way, we can make the code more loosely coupled. Angular broadly categorizes the data flow sequence in 2 ways: <h3>1. One-way Binding:</h3>This type of binding is unidirectional, i.e. this binds the data flow from the component class to the view of the same Component or vice-versa. There are various techniques through which the data flow can be bound from component to view or vice-versa. If the data flow from component to view, then this task can be accomplished with the help of String Interpolation & Property Binding. <table><thead><tr><th><h4>Binding</h4></th><th><h4>Description</h4></th><th><h4>Syntax</h4></th></tr></thead><tbody><tr><td>Attribute Binding </td><td>It is used to set the values for attributes directly, which helps to improve accessibility, styling it dynamically, along with the ability to manage multiple CSS classes for styling simultaneously. </td><td><element [attr.attribute-you-are-targeting]=”expression”></element></td></tr><tr><td>Class & Style Binding聽 </td><td>This binding is used to add or remove the used class name and styles from an HTML element’s class attribute, in order to set the styles dynamically. </td><td>[class]=”classExpression”</td></tr><tr><td><a href="https://www.geeksforgeeks.org/event-binding-in-angular-8/">Event Binding</a></td><td>Event Binding in Angular allows handling user-triggered events such as button clicks, mouse movements, and keystrokes by listening and responding to these actions. It involves calling specified methods in the component when DOM events occur, enabling data binding between the DOM and the component for further processing. </td><td><element (event) = function()></td></tr><tr><td><a href="https://www.geeksforgeeks.org/property-binding-in-angular-8/">Property Binding</a> </td><td>Property Binding in Angular is a one-way data-binding technique where we can bind a property of a DOM element to a field which is a defined property in our component TypeScript code. </td><td>[class]=”variable_name”</td></tr></tbody></table><h3>2. Two-way Binding:</h3>The flow of data is bidirectional i.e. when the data in the model changes, the changes are reflected in the view and when the data in the view changes it is reflected in the model. Two-way data binding is achieved by using the <a href="https://www.geeksforgeeks.org/angularjs-ng-model-directive/">ng-model directive</a>. The ng-model directive transfers data from the view to the model and from the model to the view. Basically, it is shorthand for a combination of property binding and event binding. According to the direction of data flow, Angular provides 3 categories to bind the data: <ul><li value="1">From data source to view target (One-way Binding)</li><li value="2">From view target to data source (One-way Binding)</li><li value="3">In a two-way data flow sequence of view target to the data source to view (Two-way Binding)</li></ul>Depending upon the direction of data flow, Angular provides the following concepts that help to bind the data flow either from source to view, view to source, or two-way sequence of view to the source to view, which are described below: <table><thead><tr><th><h4>Binding</h4></th><th><h4>Description</h4></th><th><h4>Syntax</h4></th></tr></thead><tbody><tr><td>Two-way Binding </td><td>This binding provides a way to share the data. It listens for events and updates values simultaneously between child & parent components. </td><td><app-component [(expression)]=”DataValue”></app-component></td></tr></tbody></table>The different binding types with their category, are described below:<div style="text-align:center;margin:20px 0;max-height:280px" id="GFG_AD_gfg_outstream_incontent-4"></div> <table><thead><tr><th><h4>Binding Types</h4></th><th><h4>Category</h4></th></tr></thead><tbody><tr><td>Interpolation, Property, Attribute, Class, Style</td><td>One-way from the data source to view-target</td></tr><tr><td>Event</td><td>One-way from view target to data source</td></tr><tr><td>Two-way</td><td>Two-way</td></tr></tbody></table>Except for the Text interpolation, the Binding has the target name that is declared on the left-hand side of the equal sign, where the target can be property or the event, that is surrounded by a square bracket ([ ]) characters, parenthesis (( )) characters, or both ([( )]) characters. The prefix of the binding punctuation of [], (), [()] specifies the direction of data flow, i.e., <ul><li value="1">The square bracket ([]) can be used to bind from source to view.</li><li value="2">The parenthesis (()) can be used to bind from view to a source.</li><li value="3">The [()] can be used to bind in a two-way sequence of view to the source to view.</li></ul>The expression or statement declared on the right-hand side of the equal sign, is represented within double quote (“”) characters. <blockquote>Please refer to the <a href="https://www.geeksforgeeks.org/difference-between-one-way-binding-and-two-way-binding/">Difference between One-way Binding and Two-way Binding</a> article for detailed differences between them. </blockquote>Example 3: This example describes the basic implementation of the Data Binding In Angular. <gfg-tabs data-run-ide="false"> <gfg-tab slot="tab">HTML</gfg-tab> <gfg-panel slot="panel" data-code-lang="html"> <code class="language-html"><div class=highlight><pre>   <h1>{{ title }}</h1> <hr>  <input style="color:green; margin-top: 40px; margin-left: 100px;" [value]='title'> <hr>  <h1>GeeksforGeeks</h1> <input (click)="gfg($event)" value="Geeks"> <hr>  <div style="text-align: center"> <h1 style="color: green"> GeeksforGeeks </h1> <h3>Two-way Data Binding</h3> <input type="text" placeholder="Enter text" [(ngModel)]="val" /> <br />{{ val }} </div> </pre></div></code> </gfg-panel> <gfg-tab slot="tab">JavaScript</gfg-tab> <gfg-panel slot="panel" data-code-lang="javascript"> <code class="language-javascript"><div class=highlight><pre>//app.component.ts File import { Component } from "@angular/core"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], }) export class AppComponent { title = "GeeksforGeeks"; gfg(event) { console.log(event.toElement.value); } val: string; } </pre></div></code> </gfg-panel> <gfg-tab slot="tab">JavaScript</gfg-tab> <gfg-panel slot="panel" data-code-lang="javascript"> <code class="language-javascript"><div class=highlight><pre>//app.module.ts File import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent], bootstrap: [ AppComponent ] }) export class AppModule { } </pre></div></code> </gfg-panel></gfg-tabs> <h2 id="angular-forms">Angular Forms</h2>The Angular Form is an integral part of any web application, which may contain the collection of controls for an input field, buttons, checkboxes, etc, along with having the validation check that enables to validate data entered by the user in an appropriate form. There are 2 different approaches that are facilitated by Angular, to handle the user input through the forms, i.e., the reactive form & the template-driven form. <h3>1. Template-Driven Approach: </h3>The conventional form tag is used to make the form. The Form object representation for the tag will be interpreted & created by Angular. The various form controls can be included with the help of ngModel & the grouping for multiple control can be done by using the ngControlGroup module. For validating the form field, basic HTML validation can be used. In simple words, it completely depends on the directive, in order to create & manipulate the basic object model. 2. Reactive Forms: This form facilitates the model-driven approach, in order to handle the various form inputs whose values vary with time. This form is more robust, scalable, reusable & testable, as it provides direct & access explicitly to the basic form’s object model.<div style="text-align:center;margin:20px 0;max-height:280px" id="GFG_AD_gfg_outstream_incontent-5"></div> Example 4: This example describes the basic implementation of the Angular Forms. <gfg-tabs data-run-ide="false"> <gfg-tab slot="tab">HTML</gfg-tab> <gfg-panel slot="panel" data-code-lang="html"> <code class="language-html"><div class=highlight><pre> <h1>GeeksforGeeks</h1> <input [(ngModel)]="gfg" #ctrl="ngModel" required> <p>Value: {{ gfg }}</p> <button (click)="setValue()"> Set value </button> </pre></div></code> </gfg-panel> <gfg-tab slot="tab">JavaScript</gfg-tab> <gfg-panel slot="panel" data-code-lang="javascript"> <code class="language-javascript"><div class=highlight><pre>//app.component.ts File import { Component, Inject } from "@angular/core"; import { PLATFORM_ID } from "@angular/core"; import { isPlatformWorkerApp } from "@angular/common"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], }) export class AppComponent { gfg: string = ""; setValue() { this.gfg = "GeeksforGeeks"; } } </pre></div></code> </gfg-panel> <gfg-tab slot="tab">JavaScript</gfg-tab> <gfg-panel slot="panel" data-code-lang="javascript"> <code class="language-javascript"><div class=highlight><pre>//app.module.ts File import { NgModule } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { FormsModule } from "@angular/forms"; import { AppComponent } from "./app.component"; @NgModule({ imports: [BrowserModule, FormsModule], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule {} </pre></div></code> </gfg-panel></gfg-tabs> <h2 id="angular-pipes">Angular Pipes</h2>Pipes in Angular can be used to transform the strings, currency amounts, dates, and other data, without affecting the actual content. This is a simple function that can be used with the interpolation(template expression), in order to accept the input value & return the transformed data. In order to use the Pipe, add the pipe ( | ) symbol with the expression inside the template expression. Each Pipe can be declared only once & can be used throughout the application. Angular facilitates 2 kinds of Pipes, i.e., built-in pipes & custom pipes. 1. Built-in Pipes: These are the predefined pipes provided by Angular. The list of built-in Pipes provided by Angular is described below: <table><thead><tr><th><h4>Pipe</h4></th><th><h4>Descriptions</h4></th><th><h4>Syntax</h4></th></tr></thead><tbody><tr><td><a href="https://www.geeksforgeeks.org/angular-10-datepipe-api/?ref=gcse">DatePipe</a> </td><td>This pipe is used to format the date to the specified format. </td><td>{{ value | date }} </td></tr><tr><td><a href="https://www.geeksforgeeks.org/angular-10-demicalpipe-api/?ref=gcse">DecimalPipe</a>聽 </td><td>This pipe is used to format a value according to digit options and locale rules. </td><td>{{ value | number}} </td></tr><tr><td><a href="https://www.geeksforgeeks.org/angular10-percentpipe/">PercentPipe</a> </td><td>This pipe is used to Transform a number into a percentage string. </td><td>{{ value | percent [ : digitsInfo [ : locale ] ] }} </td></tr><tr><td><a href="https://www.geeksforgeeks.org/angular-10-uppercasepipe/?ref=gcse">UpperCasePipe</a> </td><td>This pipe is used to Transform all the text to uppercase. </td><td>{{ value | uppercase }} </td></tr><tr><td><a href="https://www.geeksforgeeks.org/angular10-lowercasepipe/">LowerCasePipe</a> </td><td>This pipe is used to Transform all the text to lowercase. </td><td>{{ value | lowercase }} </td></tr><tr><td><a href="https://www.geeksforgeeks.org/what-is-currencypipe-in-angular-10/">CurrencyPipe</a> </td><td>This pipe is used to transform a number to a currency string, formatted according to locale rules that determine group sizing and separator, decimal-point character. </td><td>{{ value | currency }} </td></tr></tbody></table><h3>2. Custom Pipe: </h3>The Custom pipes can be used for various use cases like formatting the phone number, highlighting the search result keyword, returning the square of a number, etc. For generating the custom pipes, we can follow 2 ways: By creating a separate file for the pipe, we have to manually set up & configure the pipe function with the component file & need to import it into the module file. By using Angular CLI, it will set up all the necessary configurations in the component & module files automatically.<div style="text-align:center;margin:20px 0;max-height:280px" id="GFG_AD_gfg_outstream_incontent-6"></div> The Custom Pipes can further be defined by specifying as the pure & impure pipes, which are described below: <ul><li value="1">Pure Pipes: It is the pipes that execute when it detects a pure change in the input value. A pure change is when the <a href="https://angular.io/guide/glossary#change-detection" rel="noopener noreferrer nofollow" target="_blank">change detection</a> cycle detects a change to either a primitive input value (such as String, Number, Boolean, or Symbol) or object reference (such as Date, Array, Function, or Object).</li><li value="2">Impure Pipes: It is the pipes that execute when it detects an impure change in the input value. An impure change is when the <a href="https://angular.io/guide/glossary#change-detection" rel="noopener noreferrer nofollow" target="_blank">change detection</a> cycle detects a change to composite objects, such as adding an element to the existing array.</li></ul><blockquote>Please refer to the <a href="https://www.geeksforgeeks.org/explain-pure-and-impure-pipe-in-angular/">Explain pure and impure pipe in Angular</a> article for further details. </blockquote>Example 5: This example describes the basic implementation of the Angular Pipes. <gfg-tabs data-run-ide="false"> <gfg-tab slot="tab">HTML</gfg-tab> <gfg-panel slot="panel" data-code-lang="html"> <code class="language-html"><div class=highlight><pre>  <p>Date {{today | date}}</p> <p>Time {{today | date:'h:mm a z'}}</p>  <p> Number: {{pi | number}} </p> <p> Number with 4 digits: {{pi | number:'4.1-5'}} </p>  <div> <p>1st: {{gfg | percent}}</p> <p>2nd: {{geeks | percent:'4.3-5'}}</p> </div>  <h2> Product code without using custom pipe is {{productCode}} </h2> <h2> Product code using custom pipe is {{productCode | arbitrary:'-'}} </h2> </pre></div></code> </gfg-panel> <gfg-tab slot="tab">JavaScript</gfg-tab> <gfg-panel slot="panel" data-code-lang="javascript"> <code class="language-javascript"><div class=highlight><pre>//app.component.ts File import { Component } from "@angular/core"; @Component({ selector: "my-app", templateUrl: "./app.component.html", }) export class AppComponent { today: number = Date.now(); pi: number = 3.14159; geeks: number = 0.4945; gfg: number = 2.343564; productCode = "200-300"; } </pre></div></code> </gfg-panel> <gfg-tab slot="tab">JavaScript</gfg-tab> <gfg-panel slot="panel" data-code-lang="javascript"> <code class="language-javascript"><div class=highlight><pre>//app.module.ts File import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { AppComponent } from "./app.component"; import { ArbitraryPipe } from "./arbitrary.pipe"; @NgModule({ declarations: [AppComponent, ArbitraryPipe], imports: [BrowserModule], providers: [], bootstrap: [AppComponent], }) export class AppModule {} </pre></div></code> </gfg-panel> <gfg-tab slot="tab">JavaScript</gfg-tab> <gfg-panel slot="panel" data-code-lang="javascript"> <code class="language-javascript"><div class=highlight><pre>//arbitrary.pipe.ts File import { Pipe, PipeTransform } from "@angular/core"; @Pipe({ name: "arbitrary", }) export class ArbitraryPipe implements PipeTransform { transform(value: string, character: string): string { return value.replace(character, " "); } } </pre></div></code> </gfg-panel></gfg-tabs> <h2 id="services-dependency-injection">Services & Dependency Injection</h2>The Service facilitates the services to various components, in order to complete a certain task or to perform the specific operation that needs to be accomplished by the application. In simple words, Service is a class having a narrow, well-defined purpose. In order to increase the modularity and reusability, Angular help us to distinguish the Component from the Services. The purpose of using the service is to organize & share the main application logic, data or functions, and models, in order to accomplish the requirement-specific task for the different components of Angular applications. For this, we usually implement it through Dependency Injection. <h3>Features of Service:</h3><ul><li value="1">The Service is a typescript class that has a @injectable decorator in it, which notifies that the class is a service that can be injected into the components which utilize that specific service. The other Services can also be injected as dependencies.</li><li value="2">The Services can be used to contain the business logic, as it can be shared with multiple components.</li><li value="3">The Components are singleton, i.e., the single instance of the Service will be created only, & the same instance will be utilized by every building block in the Angular application.</li></ul><h3>Dependency Injection:</h3>Dependency Injection is part of Angular Framework, which is a coding pattern, where the dependencies are received by the class, from external sources, instead of creating them itself. It allows the classes along with the Angular Decorators, like, Components, Directives, Pipes, and Injectables, that help to configure the dependencies, as required. <div style="text-align:center;margin:20px 0;max-height:280px" id="GFG_AD_gfg_outstream_incontent-7"></div> Angular facilitates the ability to inject the service into the Components, in order to provide access to that component to the service. The Injectable() decorator describes the class as a service, which allows Angular to inject it into the Component as a dependency. The injector is the main technique, where it is used to create the dependencies & maintain the container of dependency instances, which will be reutilized when required. A provider is an object which notifies the injectors about the process to create or obtain the dependency. Creating a Service: The Service can be created by using the below syntax: Syntax: <pre>ng generate service <service-name> </pre><blockquote>Please refer to the <a href="https://www.geeksforgeeks.org/explain-the-steps-for-creating-a-services-in-angular-2/">Explain the steps for creating a services in Angular 2</a> article for the detailed description. </blockquote>Example 6: This example describes the basic implementation of the Services & Dependency Injection in Angular. <gfg-tabs data-run-ide="false"> <gfg-tab slot="tab">HTML</gfg-tab> <gfg-panel slot="panel" data-code-lang="html"> <code class="language-html"><div class=highlight><pre> <h2>GeeksforGeeks Course Lists:</h2> <p *ngFor="let c of courses">{{ c }}</p> </pre></div></code> </gfg-panel> <gfg-tab slot="tab">JavaScript</gfg-tab> <gfg-panel slot="panel" data-code-lang="javascript"> <code class="language-javascript"><div class=highlight><pre>//app.component.ts File import { Component } from "@angular/core"; import { CoursesService } from "./courses.service"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], }) export class AppComponent { courses: string[]; constructor(private _coursesService: CoursesService) {} ngOnInit() { this.courses = this._coursesService.getdata(); } } </pre></div></code> </gfg-panel> <gfg-tab slot="tab">JavaScript</gfg-tab> <gfg-panel slot="panel" data-code-lang="javascript"> <code class="language-javascript"><div class=highlight><pre>//app.module.ts File import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { CoursesService } from './courses.service'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [CoursesService], //FOR GLOBAL SERVICE bootstrap: [AppComponent] }) export class AppModule {} </pre></div></code> </gfg-panel> <gfg-tab slot="tab">JavaScript</gfg-tab> <gfg-panel slot="panel" data-code-lang="javascript"> <code class="language-javascript"><div class=highlight><pre>//courses.service.ts File import { Injectable } from '@angular/core'; @Injectable() export class CoursesService { constructor() {} getdata(): string[] { return [ 'Data Structures, 'Algorithms', 'Programming Language', 'Aptitude', ]; } } </pre></div></code> </gfg-panel></gfg-tabs> <h2 id="routing">Routing</h2>The Router helps to navigate between pages that are being triggered by the user鈥檚 actions. The navigation happens when the user clicks on the link or enters the URL from the browser address bar. The link can contain the reference to the router on which the user will be redirected. We can also pass other parameters with a link through angular routing. <div style="text-align:center;margin:20px 0;max-height:280px" id="GFG_AD_gfg_outstream_incontent-8"></div> For this, it helps to create a single-page application with multiple views and allows navigation between them. The routes are the JSON array where each object in the array defined the route. Angular allows for creating nested routing, which means sub-navigation or sub-page navigation between the available components. Creation of Routing Modules: Routing can only be possible to create if we have at least 2 components. The following command can be used to create the routing: <pre>ng generate module module_name --flat --module=a </pre>Here, <ul><li value="1">The flat flag depicts that this module file is required to be there inside the app folder & we don’t require to separate the folder for this module.</li><li value="2">The module flag denotes that this module is going to be part of the main app module.</li></ul><h3>Router-Outlet: </h3>The Router-outlet component basically renders any component that the router module returns, i.e. it tells the router where to display the routed views. The below syntax is used to add the router component: <pre><router-outlet></router-outlet> </pre>The routerLink directive takes a path & navigates the user to the corresponding component. In other words, it is similar to href in HTML, which takes the path & compared it to all the paths defined in the routing module & the component that matches will be displayed in the router outlet. The wildcard routes help to restrict the users to navigate to a part of the application that does not exist, i.e. when none of the path matches then the wildcard route will be used & it should always be the last route in the routes array. The router helps to select the route any time the requested URL doesn’t match any router paths. We can set up the wildcard route with the following command: <pre>{ path: '**', component: <component-name> } </pre>Here, the 2 asterisks (**) indicate this route’s definition is a wildcard route. The Router CanActivate interface that a class can implement to be a guard deciding if a route can be activated. The navigation only continues, if all guards return true, otherwise the navigation will be canceled. If UrlTree is returned by any guard, then the current navigation will be canceled & new navigation will be initiated to the UrlTree returned from the guard. The Router CanDeactivate interface that a class can implement to be a guard deciding if a route can be deactivated. The navigation only continues, if all guards return true, otherwise the navigation will be canceled.聽 Example 7: This example describes the basic implementation of Routing in Angular. <gfg-tabs data-run-ide="false"> <gfg-tab slot="tab">HTML</gfg-tab> <gfg-panel slot="panel" data-code-lang="html"> <code class="language-html"><div class=highlight><pre> <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #04aa6d; } .active { background-color: #333; } </style> </head> <body> <ul> <li> <a class="active" href="#home" routerLink="/">Home</a> </li> <li> <a href="#contact" routerLink="/contactus">Contact</a> </li> <li> <a href="#about" routerLink="/aboutus">About</a> </li> </ul> <div style="text-align: center; font-weight: bolder; font-size: 50px"> <router-outlet></router-outlet> </div> </body> </html> </pre></div></code> </gfg-panel> <gfg-tab slot="tab">HTML</gfg-tab> <gfg-panel slot="panel" data-code-lang="html"> <code class="language-html"><div class=highlight><pre> <p>about-us works!</p> <a class="btn btn-primary" routerLink="/aboutus/our_employees"> Our Employees </a> <br> <a class="btn btn-primary" routerLink="/aboutus/our_company"> Our Company </a> </pre></div></code> </gfg-panel> <gfg-tab slot="tab">HTML</gfg-tab> <gfg-panel slot="panel" data-code-lang="html"> <code class="language-html"><div class=highlight><pre> <p>our-company works!</p> <a class="btn btn-primary" routerLink="/aboutus"> Back </a> </pre></div></code> </gfg-panel> <gfg-tab slot="tab">HTML</gfg-tab> <gfg-panel slot="panel" data-code-lang="html"> <code class="language-html"><div class=highlight><pre> <p>our-employees works!</p> <a class="btn btn-primary" routerLink="/aboutus"> Back </a> </pre></div></code> </gfg-panel> <gfg-tab slot="tab">JavaScript</gfg-tab> <gfg-panel slot="panel" data-code-lang="javascript"> <code class="language-javascript"><div class=highlight><pre>//app-routing.module.ts File import { NgModule } from "@angular/core"; import { RouterModule, Routes } from "@angular/router"; import { AboutUsComponent } from "./about-us/about-us.component"; import { OurCompanyComponent } from "./about-us/our-company/our-company.component"; import { OurEmployeesComponent } from "./about-us/our-employees/our-employees.component"; import { ContactUsComponent } from "./contact-us/contact-us.component"; import { HomeComponent } from "./home/home.component"; const routes: Routes = [ { path: "", component: HomeComponent, }, { path: "aboutus", children: [ { path: "", component: AboutUsComponent, }, { path: "our_employees", component: OurEmployeesComponent, }, { path: "our_company", component: OurCompanyComponent, }, ], }, { path: "contactus", component: ContactUsComponent, }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], }) export class AppRoutingModule {} </pre></div></code> </gfg-panel> <gfg-tab slot="tab">JavaScript</gfg-tab> <gfg-panel slot="panel" data-code-lang="javascript"> <code class="language-javascript"><div class=highlight><pre>//app.module.ts File import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { RouterModule, Router } from '@angular/router'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; import { ContactUsComponent } from './contact-us/contact-us.component'; import { AboutUsComponent } from './about-us/about-us.component'; @NgModule({ declarations: [ AppComponent, HomeComponent, ContactUsComponent, AboutUsComponent ], imports: [BrowserModule, FormsModule], bootstrap: [AppComponent] }) export class AppModule {} </pre></div></code> </gfg-panel></gfg-tabs> <div id="AP_G4GR_6"></div>  <div class='article_bottom_text'></div> <div id="video-tab-content" class="video-tab-content"> <div style="text-align: center; margin: 20px 0px;" id="GFG_AD_InContent_Desktop_728x280"></div> </div> <div class="d-row content-bw article-pgnavi v-divider-gfg"style="margin-top: 20px;"> <div class="article-pgnavi_prev"><div class="comment_div" data-title="Comments"><button class="author_footer_btn" data-gfg-action="loadComments"> <div class='discussion_panel'> Comment </div></button></div><div class="trigger-div"><button class="author_footer_btn"><div class="more_info">More info</div></button></div> <a href="https://www.geeksforgeeks.org/about/contact-us/?listicles" target="_blank" class="advertise-with-us-div"><button class="advertise-with-us-btn">Advertise with us</button></a> </div> <div class="article-pgnavi_next"> <a href="https://www.geeksforgeeks.org/bootstrap-cheatsheet-a-basic-guide-to-bootstrap/?ref=next_article" class="pg-head"> Next Article </a>  <div class="pg-main"> <a href="https://www.geeksforgeeks.org/bootstrap-cheatsheet-a-basic-guide-to-bootstrap/?ref=next_article">Bootstrap Cheat Sheet - A Basic Guide to Bootstrap</a> </div> </div> </div> <div class="more-info hidden-div"> <div class="article-meta-author-details "> <div class="article-meta-author-details-block"> <div class="article-meta-author-details-profile-display"> <div class="author_info"> <div class="article-meta-author-details-profile-display-icon"> <a href="https://www.geeksforgeeks.org/user/bijaybhaskar/contributions/?itm_source=geeksforgeeks&itm_medium=article_author&itm_campaign=auth_user" style="text-decoration: none;"><div class="image-wrap" style="position: relative">B <div style="position: absolute;top: -35px; left: -13px;"> </div> </div> </a> </div> <div class="article-meta-author-details-profile-display-name" > <a aria-label="author profile" href="https://www.geeksforgeeks.org/user/bijaybhaskar/contributions/?itm_source=geeksforgeeks&itm_medium=article_author&itm_campaign=auth_user" style="display: block;overflow: hidden;width: 65px;text-decoration: none;text-overflow: ellipsis;color: var(--gfg-title-color);font-weight: bold;white-space: nowrap;">bijaybhaskar</a> </div> </div> <div class="author_follow_btn"><div class="article-meta-author-details-follow-button"> <div class="follow-container"> <div class="follow-btn" > <button id="followAuthor" type="button" onclick ="followOrUnfollowAuthor()" value="bijaybhaskar"> <svg viewBox="64 64 896 896" focusable="false" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg> Follow</button></div></div></div></div> </div> </div> <div class="article_bottom_suggestion_wrapper"> <div class="article_bottom_suggestion" data-title="Follow"> <a href='https://news.google.com/publications/CAAqBwgKMLTrzwsw44bnAw?hl=en-IN&gl=IN&ceid=IN%3Aen' target="_blank"> <img class="gfg-icon_Gnews no-zoom-in-cursor" src=https://media.geeksforgeeks.org/auth-dashboard-uploads/Google-news.svg loading="lazy" alt="News"></img> </a> </div> <div pid="880936" class="article--viewer_like tooltip tooltipBottom" data-title="Like Article">  <button id="likeButton" aria-label="like article" data-gfg-action="like-article" data-bookmark-value="0" data-liked="false" style="color: #5B5A5A !important; display: flex; align-items: center; background-color: unset; margin: 0px !important; padding: 5px 0px;"> <figure id="likeCount" style="margin-left: 3px; margin-top: 4px; color: var(--like-count-color); font-size: 14px; font-weight: 600;" class="favoriteText"></figure> </button> </div> <div class="article_bottom_suggestion" onclick="improveArticleCall()" data-title="Improve"> Improve </div> </div> </div> <div class="bottom-wrap" style="margin-top: 12px; margin-bottom: 25px;"> <div class="improved"> <div class="t-head">Article Tags : </div> <ul> <li style="border-radius: 25px;" class=""> <a href="https://www.geeksforgeeks.org/category/web-technologies/angular-js/?ref=article_category">AngularJS</a> </li> <li style="border-radius: 25px;" class=""> <a href="https://www.geeksforgeeks.org/category/web-technologies/?ref=article_category">Web Technologies</a> </li> <li style="border-radius: 25px;" class=""> <a href="https://www.geeksforgeeks.org/tag/gfg-sheets/?ref=article_tag">GFG Sheets</a> </li> <li style="border-radius: 25px;" class=""> <a href="https://www.geeksforgeeks.org/tag/web-dev-sheet/?ref=article_tag">Web-Dev Sheet</a> </li> </ul> </div> </div> </div> </article> <div class="article--recommended article--recommended_wrapper" id="similar-reads"> <h3 class="new-top-bar top-bar-title">Similar Reads</h3> <div class="gfg-similar-reads-list"> <ul class="similarReadLeftBarList"><div class="second"><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/html-cheat-sheet/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">HTML Cheat Sheet </div> <div class="gfg-similar-read-item-subheading">HTML (HyperText Markup Language) serves as the foundational framework for web pages, structuring content like text, images, and videos. HTML forms the backbone of every web page, defining its structure, content, and interactions. Its enduring relevance lies in its universal adoption across web devel</div> </div> <div class="reading-time"> 15 min read </div> </a></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/css-cheat-sheet-a-basic-guide-to-css/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">CSS Cheat Sheet </div> <div class="gfg-similar-read-item-subheading">What is CSS? CSS i.e. Cascading Style Sheets is a stylesheet language used to describe the presentation of a document written in a markup language such as HTML, XML, etc. CSS enhances the look and feel of the webpage by describing how elements should be rendered on screen or in other media. What is</div> </div> <div class="reading-time"> 13 min read </div> </a></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/javascript-cheat-sheet-a-basic-guide-to-javascript/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">JavaScript Cheat Sheet </div> <div class="gfg-similar-read-item-subheading">JavaScript is a lightweight, open, and cross-platform programming language. It is omnipresent in modern development and is used by programmers across the world to create dynamic and interactive web content like applications and browsers JavaScript (JS) is a versatile, high-level programming language</div> </div> <div class="reading-time"> 15+ min read </div> </a></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/jquery-cheat-sheet-a-basic-guide-to-jquery/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">jQuery Cheat Sheet </div> <div class="gfg-similar-read-item-subheading">What is jQuery?jQuery is an open-source, feature-rich JavaScript library, designed to simplify the HTML document traversal and manipulation, event handling, animation, and Ajax with an easy-to-use API that supports the multiple browsers. It makes the easy interaction between the HTML & CSS docum</div> </div> <div class="reading-time"> 15+ min read </div> </a></li><li class="currentpage similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/angular-cheat-sheet-a-basic-guide-to-angular/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Angular Cheat Sheet </div> <div class="gfg-similar-read-item-subheading">Angular is a client-side TypeScript-based, front-end web framework developed by the Angular Team at Google, that is mainly used to develop scalable single-page web applications(SPAs) for mobile & desktop. Angular is a great, reusable UI (User Interface) library for developers that helps in build</div> </div> <div class="reading-time"> 15+ min read </div> </a></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/bootstrap-cheatsheet-a-basic-guide-to-bootstrap/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Bootstrap Cheat Sheet </div> <div class="gfg-similar-read-item-subheading">Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all</div> </div> <div class="reading-time"> 15+ min read </div> </a></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/react-cheat-sheet/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">ReactJS Cheat Sheet </div> <div class="gfg-similar-read-item-subheading">React is an open-source JavaScript library used to create user interfaces in a declarative and efficient way. It is a component-based front-end library responsible only for the view layer of a Model View Controller (MVC) architecture. React is used to create modular user interfaces and promotes the</div> </div> <div class="reading-time"> 10 min read </div> </a></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/html-complete-guide/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">HTML Complete Guide </div> <div class="gfg-similar-read-item-subheading">What is HTML ? HTML stands for Hypertext Markup Language. It is a standard markup language used to design the documents displayed in the browsers as a web page. This language is used to annotate (make notes for the computer) text so that a machine can understand it and manipulate text accordingly. M</div> </div> <div class="reading-time"> 7 min read </div> </a></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/css-complete-guide/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">CSS Complete Guide </div> <div class="gfg-similar-read-item-subheading">What is CSS ? CSS stands for "Cascading Style Sheet". It is used to style HTML Documents. CSS simplifies the process of making web pages presentable. It describes how web pages should look it prescribes colors, fonts, spacing, and much more. What is CSS Complete Guide ? CSS Complete Guide is a list</div> </div> <div class="reading-time"> 5 min read </div> </a></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/javascript-complete-guide/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">JavaScript Complete Guide </div> <div class="gfg-similar-read-item-subheading">JavaScript is a lightweight, cross-platform, single-threaded, and interpreted compiled programming language. It is also known as the scripting language for web pages. Let's see, all essential JavaScript concepts from A to Z, helping you build a solid understanding of the language. JavaScript for Beg</div> </div> <div class="reading-time"> 6 min read </div> </a></li></div></ul> </div> </div> <div class="vote-wrap"> <div style="display:none;align-items:center;justify-content:center;width:100%;"> <button aria-label="like" data-type="like" class="vote-this" style="margin-right: 0; margin-left:0 ;"> Like <figure class="favoriteText"></figure> </button> </div> </div> </div> <div class="article-meta"> <div class="bottom-wrap"> <div id="GFG_AD_InContent_Desktop_BTF_650x250" style="text-align:center;max-height: 300px;"></div> </div>  </div> </div> </div> </div> <div id="report_modal_content" class="report_modal_content" style="display:hidden;"></div> <div class="onopen-discussion-panel"> <div class="discussion-tab"> <div class="discussion_heading"> <div></div> </div> <div class="discussion_content"> <div style="height:100%"> <div style="height:100%" id="comment-system"></div> </div> </div> </div> </div> <div class="rightBar" style="padding-right: 5px;"> <style> .article--container_content{ align-items: unset !important; } .sideBar { position: sticky !important; } .gfg-icon_switch::after { background-position: -40px -281px !important; } .gfg-icon_transaction::after { background-position: -40px -321px !important; } .header-main__profile.selected+.mega-dropdown{ width: 225px !important; } #courses-container .course-price{ display:none; } /* .side--container_wscard .card-content .content .meta:empty, .practiceBannerFromPlugin{ display:none !important; } */ .side--container_wscard .card-content .content .meta{ display:block !important; } .side--container_wscard .card-content .content .meta p{ background-color: rgba(254, 212, 91, 0.6); font-size: 10pt; font-weight: bold; display: inline-block; color: var(--color-black); margin-top: 15px; padding: 0px 5px; } #try-it{ display:initial !important; } #try-it .try-it-div{ line-height: 34px; } .gfg-icon_dark-mode::after { background-position: -40px -680px; } .side--container_wscard .head{ font-size: 14px !important; } .nineDot-menu, .gfg-icon_ndot{ display: none; } #text-15{ flex-direction: column; } .mtq_correct_marker, .mtq_wrong_marker{ display: none; } .sidebar_wrapper > :last-child{ margin: unset !important; margin-left: 5px !important; margin-top: 20px !important; top: 70px !important; } .darkMode-wrap{ bottom:1% !important; } #secondary .textwidget{ margin-left: auto; margin-right: 0; text-align: right; } #secondary .widget_text:last-child{ top: 70px !important; } @media(max-width:768px){ #scrollTopBtn{ display:none !important; } } .rightbar_loggedin_promo_cta{ display:flex; cursor:pointer; margin-bottom:20px; } </style> <div id="secondary" class="widget-area"> <div class='OINTechPromoRightBarBanner' id='rightBarSaleBanner' style='text-align:right; margin-bottom:5px;'><a href=https://www.geeksforgeeks.org/geeksforgeeks-premium-subscription?itm_source=geeksforgeeks&itm_medium=rightbar_oin&itm_campaign=premium><img src=https://media.geeksforgeeks.org/auth-dashboard-uploads/premium_oin_rbar_min.png alt='three90RightbarBannerImg' style='width:300px; height:250px;'></a></div>  <aside id="text-15" class="widget widget_text"> <div class="textwidget"> <div id="_GFG_ABP_Desktop_RightSideBar_ATF_300x600_2"></div> <div id="GFG_AD_Desktop_RightSideBar_ATF_300x250_2" style="min-width: 300px;margin-bottom:10px;"></div> <div id='GFG_AD_Desktop_RightSideBar_ATF_300x600' style='min-width: 300px; min-height: 600px;margin-bottom:10px;'></div> </div> </aside>  <aside id="text-16" class="widget widget_text"> <div class="textwidget"> <div id="_GFG_ABP_Desktop_RightSideBar_MTF_300x600"></div> <div id='GFG_AD_Desktop_RightSideBar_MTF_300x250' style='min-width: 300px;'></div> <div id="_GFG_ABP_Desktop_RightSideBar_BTF_300x600"></div> <div id="_GFG_ABP_Desktop_RightSideBar_BTF_300x600_3"></div> </div> </aside>    <aside id="text-18" class="widget widget_text"> <div class="textwidget"> <div id='GFG_AD_Desktop_RightSideBar_BTF_Sticky_300x250' style='min-width: 300px;margin-bottom:10px'></div> <div id='GFG_AD_Desktop_RightSideBar_Docked_160x600' style='min-width: 160px;'></div><div id='GFG_AD_Desktop_RightSideBar_BTFdocked_300x600' style='min-width: 300px;'></div> </aside>  <aside id="text-20" class="widget widget_text"> <div class="textwidget">  </div> </aside> </div> <div id="user-personal-note" style="display: none;"></div> </div> </div> <section class="disqus-section"> <div class="article-page_flex"> <div class="leftBar"> </div> </div> </section> </div> <div id="video-popup" style="display:none"></div> <link rel="stylesheet" href='https://www.geeksforgeeks.org/wp-content/themes/iconic-one/css/articleList.min.css?ver=1.7'> <script> $(document).ready(function() { var isfollowingApiCall = false; if ($('.follow-btn').length) { var articleRecommendedTop = $(".article--recommended").offset().top; var articleRecommendedBottom = articleRecommendedTop + $(".article--recommended").outerHeight(); $(window).scroll(function() { var top_of_element = $(".article--recommended").offset().top; var bottom_of_element = $(".article--recommended").offset().top + $(".article--recommended").outerHeight(); var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight(); var top_of_screen = $(window).scrollTop(); if ((bottom_of_screen > top_of_element && top_of_screen < bottom_of_element) || (bottom_of_screen > articleRecommendedTop && top_of_screen < articleRecommendedBottom) || (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", "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"); } 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"); } </script>  <script> $(document).ready(function() { $("#showMoreTagsBtn").click(function() { $('.articles-hidden-tags').show(); $(this).hide(); }); $("#showMorePracticeTagsBtn").click(function() { $(".practice-tags li:nth-child(n+5)").show(); $(this).hide(); }); }); </script>  <style> .grecaptcha-badge { visibility: hidden !important; } .thank-you-message { height: 100%; display:flex; flex-direction: column; justify-content: center; align-items: center; } .thank-you-message-content { margin-top: 17px; font: 400 20px var(--font-secondary); color: var(--improve-modal-text); line-height: 180%; text-align: center; } .thank-you-message-content h2{ font-family: var(--font-secondary); } .all-footer-information{ width: 100% !important;; } .footer-wrapper_links-list{ margin-block-start: 0em !important; width: 16% !important; padding-inline-start: 18px !important; } .link-head{ margin-bottom: 0px; } @media only screen and (max-width:1340px) { .footer-wrapper_links-list{ overflow-wrap: break-word; } } @media screen and (min-width: 991px) { .all-footer-information{ padding-left:15px; } } @media only screen and (max-width:980px) { .footer-wrapper_branding-address{ padding-top: 10px; } } @media (max-width: 750px) { .thank-you-message-content{ font-size: 14px; line-height: 170%; } } /* CSS variable meant to handle the dark and light mode icon for three 90 event in header courses dropdown */ :root{ --three90headericon : url('https://media.geeksforgeeks.org/auth-dashboard-uploads/three90daylogocompressed.svg'); --three90headericonposition : 0px -40px; --three90leftbarimggrid : url('https://media.geeksforgeeks.org/auth-dashboard-uploads/three90leftbarspritecompressed.svg'); --three90leftbarimgposition : -5px -55px; --three90leftbarbgcolour : #b3abd0; } body[data-dark-mode="true"]{ --three90leftbarimgposition : -6px 1px; --three90headericonposition : 0px 0px; --three90leftbarbgcolour: #8c82b9; } .three90leftbarimg{ margin-left: -5px; height: 30px; background-image: var(--three90leftbarimggrid); background-repeat: no-repeat; background-position: var(--three90leftbarimgposition); background-size: 212px; } .courseTabShimmer{ position: absolute; height: 110%; width: 0; opacity: .7; -webkit-animation: courseShimmer 2s cubic-bezier(0,0,.07,.61) infinite; animation: courseShimmer 2s cubic-bezier(0,0,.07,.61) infinite; box-shadow: 0 0 25px 5px #dddcdc; -webkit-transform: rotate(90deg); transform: rotate(90deg); padding:0px !important; border:unset !important; } @keyframes courseShimmer{ 0% { left: 0; } 55% { left: 100%; } 99% { left: 110%; } } </style> </div> <div id="displayModal" class="modal fade" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="error-message"></div>  <div class="modal-body" id="dmBody"> <div id="modal-dm-content"></div> <div class="modal-overlay" aria-hidden=true> </div>  </div> </div> </div> </div> <div id="displayModalBackdrop" class="backdrop"></div>  <footer class="gfg-footer" id="gfg-footer"> <div class="footer-wrapper"> <div class="footer-wrapper_branding"> <a class="footer-wrapper_branding-anchor" aria-label="GeeksforGeeks Logo" href="https://www.geeksforgeeks.org/"> <img style="height: 32px; width: 230px; max-width: fit-content;" class="footer-wrapper_branding-nlogo" src="https://media.geeksforgeeks.org/auth-dashboard-uploads/gfgFooterLogo.png" alt="geeksforgeeks-footer-logo"/> </a> <div class="footer-wrapper_branding-address"> <div class="address_section"> <div class="address-icon-wrapper"> <div class="address_div"> <div class="address_name">Corporate & Communications Address:</div> <div class="footer-address"> A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305) </div> </div> </div> <div class="address-icon-wrapper"> <div class="address_div"> <div class="address_name">Registered Address:</div> K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305 </div> </div> </div> </div> <div class="footer-wrapper_branding-social"> <a href="https://www.facebook.com/geeksforgeeks.org/" rel="noopener noreferrer" aria-label="GeeksforGeeks Facebook" target="_blank"> <div class="facebook"></div> </a> <a href="https://www.instagram.com/geeks_for_geeks/" rel="noopener noreferrer" aria-label="GeeksforGeeks Instagram" target="_blank"> <div class="instagram"></div> </a> <a href="https://in.linkedin.com/company/geeksforgeeks" rel="noopener noreferrer" aria-label="GeeksforGeeks LinkedIn" target="_blank"> <div class="linkedin"></div> </a> <a href="https://twitter.com/geeksforgeeks" rel="noopener noreferrer" aria-label="GeeksforGeeks Twitter" target="_blank"> <div class="twitter"></div> </a> <a href="https://www.youtube.com/geeksforgeeksvideos" rel="noopener noreferrer" aria-label="GeeksforGeeks YouTube" target="_blank"> <div class="youtube"></div> </a> </div> <div class="footer-wrapper_branding-app"> <a aria-label="GeeksforGeeks App Link" href="https://geeksforgeeksapp.page.link/gfg-app" target="_blank" ><img src="https://media.geeksforgeeks.org/auth-dashboard-uploads/googleplay.png" alt="GFG App on Play Store" id="gplay" loading="lazy"></a> <a aria-label="GeeksforGeeks App Link" href="https://geeksforgeeksapp.page.link/gfg-app" target="_blank"><img src="https://media.geeksforgeeks.org/auth-dashboard-uploads/appstore.png" alt="GFG App on App Store" id="appstore" loading="lazy"></a> </div> <div class="footer_advertise_btn_box"> <a href="https://www.geeksforgeeks.org/advertise-with-us/?ref=footer" target="_blank" class="footer_advertise_btn">Advertise with us</a> </div> </div> <div class="all-footer-information"> <div class="footer-wrapper_links" style="justify-content: space-between; text-align: -webkit-left;"><ul class="footer-wrapper_links-list" ><li>Company</li><li><a href=https://www.geeksforgeeks.org/about/?ref=outindfooter>About Us</a></li><li><a href=https://www.geeksforgeeks.org/legal/?ref=outindfooter>Legal</a></li><li><a href=https://www.geeksforgeeks.org/legal/privacy-policy/?ref=outindfooter>Privacy Policy</a></li><li><a href=https://www.geeksforgeeks.org/press-release/?ref=outindfooter>In Media</a></li><li><a href=https://www.geeksforgeeks.org/about/contact-us/?ref=outindfooter>Contact Us</a></li><li><a href=https://www.geeksforgeeks.org/advertise-with-us/?ref=outindfooter>Advertise with us</a></li><li><a href=https://www.geeksforgeeks.org/gfg-corporate-solution/?ref=outindfooter>GFG Corporate Solution</a></li><li><a href=https://www.geeksforgeeks.org/campus-training-program/?ref=outindfooter>Placement Training Program</a></li><li><a href=https://www.geeksforgeeks.org/community/?ref=outindfooter>GeeksforGeeks Community</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/introduction-to-programming-languages/?ref=outindfooter>Languages</a></li><li><a href=https://www.geeksforgeeks.org/python-programming-language/?ref=outindfooter>Python</a></li><li><a href=https://www.geeksforgeeks.org/java/?ref=outindfooter>Java</a></li><li><a href=https://www.geeksforgeeks.org/c-plus-plus/?ref=outindfooter>C++</a></li><li><a href=https://www.geeksforgeeks.org/php-tutorials/?ref=outindfooter>PHP</a></li><li><a href=https://www.geeksforgeeks.org/golang/?ref=outindfooter>GoLang</a></li><li><a href=https://www.geeksforgeeks.org/sql-tutorial/?ref=outindfooter>SQL</a></li><li><a href=https://www.geeksforgeeks.org/r-tutorial/?ref=outindfooter>R Language</a></li><li><a href=https://www.geeksforgeeks.org/android-tutorial/?ref=outindfooter>Android Tutorial</a></li><li><a href=https://www.geeksforgeeks.org/geeksforgeeks-online-tutorials-free/?ref=outindfooter>Tutorials Archive</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/learn-data-structures-and-algorithms-dsa-tutorial/?ref=outindfooter>DSA</a></li><li><a href=https://www.geeksforgeeks.org/data-structures/?ref=outindfooter>Data Structures</a></li><li><a href=https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=outindfooter>Algorithms</a></li><li><a href=https://www.geeksforgeeks.org/complete-guide-to-dsa-for-beginners/?ref=outindfooter>DSA for Beginners</a></li><li><a href=https://www.geeksforgeeks.org/basic-coding-problems-in-dsa-for-beginners/?ref=outindfooter>Basic DSA Problems</a></li><li><a href=https://www.geeksforgeeks.org/complete-roadmap-to-learn-dsa-from-scratch/?ref=outindfooter>DSA Roadmap</a></li><li><a href=https://www.geeksforgeeks.org/top-100-data-structure-and-algorithms-dsa-interview-questions-topic-wise/?ref=outindfooter>Top 100 DSA Interview Problems</a></li><li><a href=https://www.geeksforgeeks.org/dsa-roadmap-for-beginner-to-advanced-by-sandeep-jain/?ref=outindfooter>DSA Roadmap by Sandeep Jain</a></li><li><a href=https://www.geeksforgeeks.org/geeksforgeeks-master-sheet-list-of-all-cheat-sheets/?ref=outindfooter>All Cheat Sheets</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/ai-ml-ds/?ref=outindfooter>Data Science & ML</a></li><li><a href=https://www.geeksforgeeks.org/data-science-tutorial/?ref=outindfooter>Data Science With Python</a></li><li><a href=https://www.geeksforgeeks.org/data-science-for-beginners/?ref=outindfooter>Data Science For Beginner</a></li><li><a href=https://www.geeksforgeeks.org/machine-learning/?ref=outindfooter>Machine Learning</a></li><li><a href=https://www.geeksforgeeks.org/machine-learning-mathematics/?ref=outindfooter>ML Maths</a></li><li><a href=https://www.geeksforgeeks.org/python-data-visualization-tutorial/?ref=outindfooter>Data Visualisation</a></li><li><a href=https://www.geeksforgeeks.org/pandas-tutorial/?ref=outindfooter>Pandas</a></li><li><a href=https://www.geeksforgeeks.org/numpy-tutorial/?ref=outindfooter>NumPy</a></li><li><a href=https://www.geeksforgeeks.org/natural-language-processing-nlp-tutorial/?ref=outindfooter>NLP</a></li><li><a href=https://www.geeksforgeeks.org/deep-learning-tutorial/?ref=outindfooter>Deep Learning</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/web-technology/?ref=outindfooter>Web Technologies</a></li><li><a href=https://www.geeksforgeeks.org/html/?ref=outindfooter>HTML</a></li><li><a href=https://www.geeksforgeeks.org/css/?ref=outindfooter>CSS</a></li><li><a href=https://www.geeksforgeeks.org/javascript/?ref=outindfooter>JavaScript</a></li><li><a href=https://www.geeksforgeeks.org/typescript/?ref=outindfooter>TypeScript</a></li><li><a href=https://www.geeksforgeeks.org/learn-reactjs/?ref=outindfooter>ReactJS</a></li><li><a href=https://www.geeksforgeeks.org/nextjs/?ref=outindfooter>NextJS</a></li><li><a href=https://www.geeksforgeeks.org/bootstrap/?ref=outindfooter>Bootstrap</a></li><li><a href=https://www.geeksforgeeks.org/web-design/?ref=outindfooter>Web Design</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/python-programming-language/?ref=outindfooter>Python Tutorial</a></li><li><a href=https://www.geeksforgeeks.org/python-programming-examples/?ref=outindfooter>Python Programming Examples</a></li><li><a href=https://www.geeksforgeeks.org/python-projects-beginner-to-advanced/?ref=outindfooter>Python Projects</a></li><li><a href=https://www.geeksforgeeks.org/python-tkinter-tutorial/?ref=outindfooter>Python Tkinter</a></li><li><a href=https://www.geeksforgeeks.org/python-web-scraping-tutorial/?ref=outindfooter>Web Scraping</a></li><li><a href=https://www.geeksforgeeks.org/opencv-python-tutorial/?ref=outindfooter>OpenCV Tutorial</a></li><li><a href=https://www.geeksforgeeks.org/python-interview-questions/?ref=outindfooter>Python Interview Question</a></li><li><a href=https://www.geeksforgeeks.org/django-tutorial/?ref=outindfooter>Django</a></li></ul></div><div class="footer-wrapper_links" style="justify-content: space-between; text-align: -webkit-left;"><ul class="footer-wrapper_links-list" style="margin-block-start: 0em; width:16%; padding-inline-start: 18px;"><li>Computer Science</li><li><a href=https://www.geeksforgeeks.org/operating-systems/?ref=outindfooter>Operating Systems</a></li><li><a href=https://www.geeksforgeeks.org/computer-network-tutorials/?ref=outindfooter>Computer Network</a></li><li><a href=https://www.geeksforgeeks.org/dbms/?ref=outindfooter>Database Management System</a></li><li><a href=https://www.geeksforgeeks.org/software-engineering/?ref=outindfooter>Software Engineering</a></li><li><a href=https://www.geeksforgeeks.org/digital-electronics-logic-design-tutorials/?ref=outindfooter>Digital Logic Design</a></li><li><a href=https://www.geeksforgeeks.org/engineering-mathematics-tutorials/?ref=outindfooter>Engineering Maths</a></li><li><a href=https://www.geeksforgeeks.org/software-development/?ref=outindfooter>Software Development</a></li><li><a href=https://www.geeksforgeeks.org/software-testing-tutorial/?ref=outindfooter>Software Testing</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/devops-tutorial/?ref=outindfooter>DevOps</a></li><li><a href=https://www.geeksforgeeks.org/git-tutorial/?ref=outindfooter>Git</a></li><li><a href=https://www.geeksforgeeks.org/linux-tutorial/?ref=outindfooter>Linux</a></li><li><a href=https://www.geeksforgeeks.org/aws-tutorial/?ref=outindfooter>AWS</a></li><li><a href=https://www.geeksforgeeks.org/docker-tutorial/?ref=outindfooter>Docker</a></li><li><a href=https://www.geeksforgeeks.org/kubernetes-tutorial/?ref=outindfooter>Kubernetes</a></li><li><a href=https://www.geeksforgeeks.org/microsoft-azure/?ref=outindfooter>Azure</a></li><li><a href=https://www.geeksforgeeks.org/google-cloud-platform-tutorial/?ref=outindfooter>GCP</a></li><li><a href=https://www.geeksforgeeks.org/devops-roadmap/?ref=outindfooter>DevOps Roadmap</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/system-design-tutorial/?ref=outindfooter>System Design</a></li><li><a href=https://www.geeksforgeeks.org/what-is-high-level-design-learn-system-design/?ref=outindfooter>High Level Design</a></li><li><a href=https://www.geeksforgeeks.org/what-is-low-level-design-or-lld-learn-system-design/?ref=outindfooter>Low Level Design</a></li><li><a href=https://www.geeksforgeeks.org/unified-modeling-language-uml-introduction/?ref=outindfooter>UML Diagrams</a></li><li><a href=https://www.geeksforgeeks.org/system-design-interview-guide/?ref=outindfooter>Interview Guide</a></li><li><a href=https://www.geeksforgeeks.org/software-design-patterns/?ref=outindfooter>Design Patterns</a></li><li><a href=https://www.geeksforgeeks.org/object-oriented-analysis-and-design/?ref=outindfooter>OOAD</a></li><li><a href=https://www.geeksforgeeks.org/system-design-interview-bootcamp-guide/?ref=outindfooter>System Design Bootcamp</a></li><li><a href=https://www.geeksforgeeks.org/most-commonly-asked-system-design-interview-problems-questions/?ref=outindfooter>Interview Questions</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/technical-interview-preparation/?ref=outindfooter>Inteview Preparation</a></li><li><a href=https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/?ref=outindfooter>Competitive Programming</a></li><li><a href=https://www.geeksforgeeks.org/top-algorithms-and-data-structures-for-competitive-programming/?ref=outindfooter>Top DS or Algo for CP</a></li><li><a href=https://www.geeksforgeeks.org/company-wise-recruitment-process/?ref=outindfooter>Company-Wise Recruitment Process</a></li><li><a href=https://www.geeksforgeeks.org/company-preparation/?ref=outindfooter>Company-Wise Preparation</a></li><li><a href=https://www.geeksforgeeks.org/aptitude-questions-and-answers/?ref=outindfooter>Aptitude Preparation</a></li><li><a href=https://www.geeksforgeeks.org/puzzles/?ref=outindfooter>Puzzles</a></li></ul><ul class="footer-wrapper_links-list" ><li>School Subjects</li><li><a href=https://www.geeksforgeeks.org/maths/?ref=outindfooter>Mathematics</a></li><li><a href=https://www.geeksforgeeks.org/physics/?ref=outindfooter>Physics</a></li><li><a href=https://www.geeksforgeeks.org/chemistry/?ref=outindfooter>Chemistry</a></li><li><a href=https://www.geeksforgeeks.org/biology/?ref=outindfooter>Biology</a></li><li><a href=https://www.geeksforgeeks.org/social-science/?ref=outindfooter>Social Science</a></li><li><a href=https://www.geeksforgeeks.org/english-grammar/?ref=outindfooter>English Grammar</a></li><li><a href=https://www.geeksforgeeks.org/commerce/?ref=outindfooter>Commerce</a></li><li><a href=https://www.geeksforgeeks.org/tag/world-general-knowledge/?ref=outindfooter>World GK</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/videos/?ref=outindfooter>GeeksforGeeks Videos</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/sde-sheet/?ref=outindfooter>DSA</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/python/?ref=outindfooter>Python</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/java-w6y5f4/?ref=outindfooter>Java</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/c/?ref=outindfooter>C++</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/web-development/?ref=outindfooter>Web Development</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/data-science/?ref=outindfooter>Data Science</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/cs-subjects/?ref=outindfooter>CS Subjects</a></li></ul></div> </div> </div>  <style> :root{ --home-jobs-section-jf-logo: url('https://media.geeksforgeeks.org/auth-dashboard-uploads/JobFair2024Logo.svg'); } body[data-dark-mode="true"] { --home-jobs-section-jf-logo: url('https://media.geeksforgeeks.org/auth-dashboard-uploads/JobFair2024LogoDark.svg'); } .hp_job_section_jf_logo, .job-a-thon-jf-sticky-header-logo{ background: var(--home-jobs-section-jf-logo); height: 50px; background-repeat: no-repeat; width: 105px; background-size: 100px; } @keyframes challenge { 0%{ transform: scale(1); } 50%{ transform: scale(1.03); } 100%{ transform: scale(1); } } .job-a-thon-jf-sticky-header-logo{ height: 45px; } </style>  <div class="footer-strip" > <div class="copyright"> <a href="https://www.geeksforgeeks.org/" rel="noopener noreferrer" target="_blank">@GeeksforGeeks, Sanchhaya Education Private Limited</a>, <a href="https://www.geeksforgeeks.org/copyright-information/">All rights reserved</a> </div> <div class="social-links"> </div> </div> </footer> </div> <script type='text/javascript' src='https://www.geeksforgeeks.org/wp-includes/js/wp-embed.min.js?ver=4.9.8'></script>  <div class="cookie-consent hide-consent"> We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our <a href="https://www.geeksforgeeks.org/cookie-policy/" target="_blank">Cookie Policy</a> & <a href="https://www.geeksforgeeks.org/privacy-policy/" target="_blank">Privacy Policy</a> <button class="consent-btn"> Got It ! </button> </div>   <div class="lightbox-target"> <img id="lightbox-image" src="" alt="Lightbox"/> </div>   <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet"> <script> if(post_slug.includes('premium-plans-payment/') || post_slug.includes('premium-plans/')){ $('.darkMode-wrap').remove(); $('.toggle-darkMode').remove(); } function setGoogleRecaptcha() { var captchaSiteKey = '6LdMFNUZAAAAAIuRtzg0piOT-qXCbDF-iQiUi9KY'; grecaptcha.ready(function() { grecaptcha.execute(captchaSiteKey).then(function(token) { document.getElementById('g-recaptcha-response-suggestion-form').value = token; suggestionCall(); }); }); } </script> <div class="improve-modal--overlay" style="display: none;"> <div class="improve-modal--improvement" status="locked"> <div class="improve-modal--improve-header"> <div class="improve-header-fst-child">Improvement</div> <div class="improve-header-sec-child"> </div> </div> <div class="locked-status--impove-modal"> <div class="improve-modal--improve-content error-message"></div> <div class="improve-modal--improve-bottom"> <button class="improve-bottom-btn" type="button">Suggest changes</button> </div> </div> <div class="unlocked-status--improve-modal-content"> <div class="suggest-change_wrapper"> <div class="suggest-change-content_wrapper"> <div class="suggest-change">Suggest Changes</div> <div class="suggest-changes-about">Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.</div> </div> <div class="suggest-change-icon_wrapper"> <img class="suggest-change-icon" src="https://media.geeksforgeeks.org/auth-dashboard-uploads/suggestChangeIcon.png" alt="geeksforgeeks-suggest-icon"/> </div> </div> <div class="create-improvement_wrapper"> <div class="create-improvement-content_wrapper"> <div class="create-improvement">Create Improvement</div> <div class="create-improvements-about">Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.</div> </div> <div class="create-improvement-icon_wrapper"> <img class="create-improvement-icon" src="https://media.geeksforgeeks.org/auth-dashboard-uploads/createImprovementIcon.png" alt="geeksforgeeks-improvement-icon"/> </div> </div> <div class="error-status"></div> </div> </div> <div class="improve-modal--suggestion" style="display: none;">  <div class="improve-modal--improve-header"> <div class="left-arrow-icon_suggest_wrapper"> <div class="left-arrow-icon_wrapper"> </div> <div class="improve-header-fst-child">Suggest Changes</div> </div> <div class="improve-header-sec-child"> </div> </div> <div class="suggestion-modal-section"> <form> <label for="suggestion-section">min 4 words, max CharLimit:2000</label> <textarea id="suggestion-section-textarea" name="suggestion-section" placeholder="Write your suggestions here"></textarea> <input type="hidden" name="g-recaptcha-suggestion-response" id="g-recaptcha-response-suggestion-form"> </form> </div>  <div class="improve-modal--improve-bottom suggestion-btn"> <button class="suggest-bottom-btn" type="button"></button> </div> </div> <a href="#" style="visibility:hidden" class="create-improvement-redirection-to-write" target="_blank"></a> </div> <script> var lockedCasesHtml = `You can suggest the changes for now and it will be under 'My Suggestions' Tab on Write. You will be notified via email once the article is available for improvement. Thank you for your valuable feedback!`; var badgesRequiredHtml = `It seems that you do not meet the eligibility criteria to create improvements for this article, as only users who have earned specific badges are permitted to do so. However, you can still create improvements through the <a href="https://write.geeksforgeeks.org/pick-improvements/pick" target='_blank'>Pick for Improvement</a> section.`; jQuery('.improve-header-sec-child').on('click', function(){ jQuery('.improve-modal--overlay').hide(); $('.improve-modal--suggestion').hide(); }); $('.suggest-change_wrapper, .locked-status--impove-modal .improve-bottom-btn').on('click',function(){ // when suggest changes option is clicked $('#suggestion-section-textarea').val(""); $('.suggest-bottom-btn').html("Suggest changes"); $('.improve-modal--improvement').hide(); $('.improve-modal--suggestion').show(); }); $('.create-improvement_wrapper').on('click',function(){ // when create improvement option clicked then improvement reason will be shown if(loginData && loginData.isLoggedIn) { $('body').append('<div class="spinner-loading-overlay"></div>'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.unlocked-status--improve-modal-content').css("display","none"); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { showErrorMessage(e.responseJSON,e.status) }, }); } else { if(loginData && !loginData.isLoggedIn) { $('.improve-modal--overlay').hide(); if ($('.header-main__wrapper').find('.header-main__signup.login-modal-btn').length) { $('.header-main__wrapper').find('.header-main__signup.login-modal-btn').click(); } return; } } }); $('.left-arrow-icon_wrapper').on('click',function(){ if($('.improve-modal--suggestion').is(":visible")) $('.improve-modal--suggestion').hide(); else{ } $('.improve-modal--improvement').show(); }); const showErrorMessage = (result,statusCode) => { if(!result) return; $('.spinner-loading-overlay:eq(0)').remove(); if(statusCode == 403) { $('.improve-modal--improve-content.error-message').html(result.message); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); return; } } function loadScript(src, callback) { var script = document.createElement('script'); script.src = src; script.onload = callback; document.head.appendChild(script); } function suggestionCall() { var suggest_val = $.trim($("#suggestion-section-textarea").val()); var array_String= suggest_val.split(" ") var gCaptchaToken = $("#g-recaptcha-response-suggestion-form").val(); var error_msg = false; if(suggest_val != "" && array_String.length >=4){ if(suggest_val.length <= 2000){ var payload = { "gfg_post_id" : `${post_id}`, "suggestion" : `${suggest_val}`, } if(!loginData || !loginData.isLoggedIn) // User is not logged in payload["g-recaptcha-token"] = gCaptchaToken jQuery.ajax({ type:'post', url: "https://apiwrite.geeksforgeeks.org/suggestions/auth/create/", xhrFields: { withCredentials: true }, crossDomain: true, contentType:'application/json', data: JSON.stringify(payload), success:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-section-textarea').val(""); jQuery('.suggest-bottom-btn').css("display","none"); // Update the modal content const modalSection = document.querySelector('.suggestion-modal-section'); modalSection.innerHTML = ` <div class="thank-you-message" style="text-align: center;"> <h2>Thank You!</h2> <div class="thank-you-message-content">Your suggestions are valuable to us.</div> </div> `; }, error:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Something went wrong."); jQuery('#suggestion-modal-alert').show(); error_msg = true; } }); } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Minimum 5 Words and Maximum Character limit is 2000."); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Enter atleast four words !"); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } if(error_msg){ setTimeout(() => { jQuery('#suggestion-section-textarea').focus(); jQuery('#suggestion-modal-alert').hide(); }, 3000); } } document.querySelector('.suggest-bottom-btn').addEventListener('click', function(){ jQuery('body').append('<div class="spinner-loading-overlay"></div>'); jQuery('.spinner-loading-overlay').show(); if(loginData && loginData.isLoggedIn) { suggestionCall(); return; } // load the captcha script and set the token loadScript('https://www.google.com/recaptcha/api.js?render=6LdMFNUZAAAAAIuRtzg0piOT-qXCbDF-iQiUi9KY',[], function() { setGoogleRecaptcha(); }); }); $('.improvement-bottom-btn.create-improvement-btn').click(function() { //create improvement button is clicked $('body').append('<div class="spinner-loading-overlay"></div>'); $('.spinner-loading-overlay').show(); // send this option via create-improvement-post api jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { showErrorMessage(e.responseJSON,e.status); }, }); }); </script> <script> var AdblockPlus = new function() { this.detect = function(px, callback) { var detected = false; var checksRemain = 2; var error1 = false; var error2 = false; if (typeof callback != "function") return; px += "?ch=*&rn=*"; function beforeCheck(callback, timeout) { if (checksRemain == 0 || timeout > 1E3) callback(checksRemain == 0 && detected); else setTimeout(function() { beforeCheck(callback, timeout * 2) }, timeout * 2) } function checkImages() { if (--checksRemain) return; detected = !error1 && error2 } var random = Math.random() * 11; var img1 = new Image; img1.onload = checkImages; img1.onerror = function() { error1 = true; checkImages() }; img1.src = px.replace(/\*/, 1).replace(/\*/, random); var img2 = new Image; img2.onload = checkImages; img2.onerror = function() { error2 = true; checkImages() }; img2.src = px.replace(/\*/, 2).replace(/\*/, random); beforeCheck(callback, 250) } }; /* AdblockPlus.detect("https://cdnads.geeksforgeeks.org/res/px.gif", function(abp){ window.googletag = window.googletag || {cmd: []}; window.abp=abp; var elms = [...document.querySelectorAll('div[id^=_GFG_ABP_]')]; const units=elms.map(elem=>elem.id) if(abp) { for(let curr_unit of units) { const iframe = document.createElement('iframe'); iframe.setAttribute('src',"https://aa.geeksforgeeks.org/iframe.html?code="+curr_unit.substr(1)) const elem = document.getElementById(curr_unit) const div = document.createElement('div'); div.setAttribute('id',curr_unit.substr(1)) let sizes = curr_unit.split("_"); sizes = sizes.filter(val => val.includes('x')); let [width, height] = sizes[0].split("x"); iframe.style.width = `${+width+20}px` iframe.style.height = `${+height+20}px` if(elem) { elem.appendChild(iframe); } } var gfgAdDivs = [...document.querySelectorAll('div[id^=GFG_AD_]')]; gfgAdDivs.forEach(gfgDiv => document.getElementById(gfgDiv.id).removeAttribute("style")); jQuery('#secondary .widget_text:last-child').css({"position": "unset"}); } });*/ AdblockPlus.detect("https://cdnads.geeksforgeeks.org/res/px.gif", function(abp){ window.googletag = window.googletag || {cmd: []}; window.abp=abp; var elms = [...document.querySelectorAll('div[id^=_GFG_ABP_]')]; //const units=elms.map(elem=>elem.id) const units = elms .filter(elem => !(window.innerWidth < 1500 && elem.id === "_GFG_ABP_Incontent_728x90")) .map(elem => elem.id); if(abp) { isAdBlockerPresent = true; for(let curr_unit of units) { const iframe = document.createElement('iframe'); iframe.addEventListener("load", () => { iframe.contentWindow.postMessage(JSON.stringify({host: window.location.host,category: window.arrPostCatName,parentWidth: window.innerWidth}),'https://aa.geeksforgeeks.org'); }); iframe.setAttribute('src',"https://aa.geeksforgeeks.org/iframe.html?code="+curr_unit.substr(1)) const elem = document.getElementById(curr_unit) const div = document.createElement('div'); div.setAttribute('id',curr_unit.substr(1)) let sizes = curr_unit.split("_"); sizes = sizes.filter(val => val.includes('x')); let [width, height] = sizes[0].split("x"); iframe.style.width = `${+width+20}px` iframe.style.height = `${+height+20}px` if(elem) { elem.appendChild(iframe); } } var gfgAdDivs = [...document.querySelectorAll('div[id^=GFG_AD_]')]; gfgAdDivs.forEach(gfgDiv => document.getElementById(gfgDiv.id).removeAttribute("style")); jQuery('#secondary .widget_text:last-child').css({"position": "unset"}); } else{ try { var isAdblockEnabled = t => fetch( new Request('https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', { method: 'HEAD', mode: 'no-cors' }) ).catch(t); isAdblockEnabled(() => { // here goes modal pop-up code isAdBlockerPresent = true; }); } catch (err) {console.log(err);} } }); function closeAdBlockPopupModal(){ const modal = document.getElementById("adBlockerModal"); $('body').removeClass('body-for-ad-blocker'); $('#adBlockerModal').remove() localStorage.setItem('gfgAdBlockPopup',new Date()) } function showAdblockerModal(){ let randomNumberForButtonText = Math.round(Math.random()); let currTime = new Date(); let lastTime = new Date(localStorage.getItem('gfgAdBlockPopup')); if(((currTime-lastTime)/(1000*60*60))<1) { return; } const adBlockerModal = `<div id="adBlockerModal" class="ad-blocker-modal"> <div id="ad-blocker-modal-overlay"> <div id="ad-blocker-outer-div"> <div id="ad-blocker-div"> It seems that you are using an ad blocker. Please disable it to support us! <div id="ad-blocker-div-btns"> <button id="ad-blocker-div-button1" onclick="handleAdBlockerClick('disabled')"> I disabled my ad blocker </button> <a href="https://www.geeksforgeeks.org/geeksforgeeks-premium-subscription${randomNumberForButtonText === 1 ? "/?itm_source=geeksforgeeks&itm_medium=adblocker&itm_campaign=premium1" : "/?itm_source=geeksforgeeks&itm_medium=adblocker&itm_campaign=premium2"}" target="_blank"> <button id="ad-blocker-div-button2" style=" background: linear-gradient(45deg, #f0bd36, #bf873f); border: 1px solid transparent; color: white; " > ${randomNumberForButtonText === 1 ? "Go Ad-Free with Premium" : "Upgrade for No Ads"} </button> </a> </div> <div id="ad-blocker-div-continue-premium-promo-text"> "For an ad-free experience and exclusive features, subscribe to our Premium Plan!" </div> <div id="ad-blocker-div-continue-btn-div"> <a id="ad-blocker-div-continue-btn" href="#" onclick="closeAdBlockPopupModal()">Continue without supporting</a> </div> </div> </div> </div> </div>`; $('body').append(adBlockerModal); $('body').addClass('body-for-ad-blocker'); const modal = document.getElementById("adBlockerModal"); modal.style.display = "block"; } function handleAdBlockerClick(type){ if(type == 'disabled'){ window.location.reload(); } else if(type == 'info'){ document.getElementById("ad-blocker-div").style.display = "none"; document.getElementById("ad-blocker-info-div").style.display = "flex"; handleAdBlockerIconClick(0); } } var lastSelected= null; //Mapping of name and video URL with the index. const adBlockerVideoMap = [ ['Ad Block Plus','https://media.geeksforgeeks.org/auth-dashboard-uploads/abp-blocker-min.mp4'], ['Ad Block','https://media.geeksforgeeks.org/auth-dashboard-uploads/Ad-block-min.mp4'], ['uBlock Origin','https://media.geeksforgeeks.org/auth-dashboard-uploads/ub-blocke-min.mp4'], ['uBlock','https://media.geeksforgeeks.org/auth-dashboard-uploads/U-blocker-min.mp4'], ] function handleAdBlockerIconClick(currSelected){ const videocontainer = document.getElementById('ad-blocker-info-div-gif'); const videosource = document.getElementById('ad-blocker-info-div-gif-src'); if(lastSelected != null){ document.getElementById("ad-blocker-info-div-icons-"+lastSelected).style.backgroundColor = "white"; document.getElementById("ad-blocker-info-div-icons-"+lastSelected).style.borderColor = "#D6D6D6"; } document.getElementById("ad-blocker-info-div-icons-"+currSelected).style.backgroundColor = "#D9D9D9"; document.getElementById("ad-blocker-info-div-icons-"+currSelected).style.borderColor = "#848484"; document.getElementById('ad-blocker-info-div-name-span').innerHTML = adBlockerVideoMap[currSelected][0] videocontainer.pause(); videosource.setAttribute('src', adBlockerVideoMap[currSelected][1]); videocontainer.load(); videocontainer.play(); lastSelected = currSelected; } </script>  <style> /* Temporary CSS for Three90 pop up modal (START)*/ .three90popup__container { width: 100vw; height: 100vh; position: fixed; top:0px; background: var(--job-tab-faded-background); z-index: 1024; display: flex; align-items: center; justify-content: center; } .three90modal__wrapper{ background-color: white; max-width: 350px; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; } .three90modal__message-container { display: flex; flex-direction: column; align-items: center; font-family: var(--font-primary); } .three90modal__subheading { margin-top: 20px; font-size: 22px; font-weight: 600; } .three90modal__text-message { margin-top: 20px; font-size: 15px; font-weight: 400; text-align: center; padding: 0 5px; } .three90__modal__button-wrapper { width: 100%; padding: 20px 0px; display: flex; justify-content: space-evenly; } .three90__modal__button-wrapper > button { width: 105px; height: 35px; border-radius: 13px; border:none; font-weight: 600; cursor: pointer; } #three90__modal-close-btn:hover { background-color: #cacbcd; } #three90__modal-explore-btn { background-color: #0a0727; color: white } @media screen and (max-width: 441px) { .three90modal__wrapper { max-width: 300px; } } /* Temporary CSS for Three90 pop up modal (END)*/ </style> <script type="text/javascript" > const coursePromotionCities = JSON.parse(`{"NCR":{"LOCATIONS":["Noida","Greater Noida","Ghaziabad","Faridabad","Delhi","New Delhi"],"COURSES":[{"name":"GATE CS 2025 Classroom Program","url":"https:\/\/www.geeksforgeeks.org\/courses\/gate-cs-self-paced"},{"name":"MERN Full Stack Development","url":"https:\/\/www.geeksforgeeks.org\/courses\/mern-full-stack-development-classroom"},{"name":"DSA For Interview Preparation","url":" https:\/\/www.geeksforgeeks.org\/courses\/dsa-interview-preparation-classroom"},{"name":"JAVA Backend Development","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-java-backend-development-program"},{"name":"Data Analytics Programme","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-data-analytics-program"},{"name":"AWS Solutions Architect Certification","url":"https:\/\/www.geeksforgeeks.org\/courses\/aws-solutions-architect-certification-classroom-training"},{"name":"Explore All","url":"https:\/\/www.geeksforgeeks.org\/courses\/offline-courses"}]},"NON_NCR":{"Bengaluru":[{"name":"Data Science Classroom Program","url":"https:\/\/www.geeksforgeeks.org\/courses\/data-science-classroom-program"},{"name":"System Design Classroom Program","url":"https:\/\/www.geeksforgeeks.org\/courses\/system-design-classroom-program"},{"name":"MERN Full Stack Development","url":"https:\/\/www.geeksforgeeks.org\/courses\/mern-full-stack-development-classroom"},{"name":"DSA For Interview Preparation","url":"https:\/\/www.geeksforgeeks.org\/courses\/dsa-interview-preparation-classroom"},{"name":"JAVA Backend Development","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-java-backend-development-program"},{"name":"Data Analytics Programme","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-data-analytics-program"},{"name":"AWS Solutions Architect Certification","url":"https:\/\/www.geeksforgeeks.org\/courses\/aws-solutions-architect-certification-classroom-training"},{"name":"Explore All","url":"https:\/\/www.geeksforgeeks.org\/courses\/offline-courses"}],"Pune":[{"name":"MERN Full Stack Development","url":"https:\/\/www.geeksforgeeks.org\/courses\/mern-full-stack-development-classroom"},{"name":"DSA For Interview Preparation","url":"https:\/\/www.geeksforgeeks.org\/courses\/dsa-interview-preparation-classroom"},{"name":"Complete Data Analytics Program","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-data-analytics-program"},{"name":"Explore All","url":"https:\/\/www.geeksforgeeks.org\/courses\/offline-courses"}],"Hyderabad":[{"name":"Complete Data Analytics Program","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-data-analytics-program"},{"name":"Complete Backend Development Program","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-java-backend-development-program"},{"name":"DSA for Interview Preparation","url":"https:\/\/www.geeksforgeeks.org\/courses\/dsa-interview-preparation-classroom"},{"name":"MERN Full Stack Web Development","url":"https:\/\/www.geeksforgeeks.org\/courses\/mern-full-stack-development-classroom"}]}}`); const offlineCourseTermMapper = JSON.parse(`{"ALL_TERMIDS":["2058","6263","2628","1745","1789","2601","2057","5037","2971","2023","2162","2795"],"COURSE_TERMID_MAP":{"JAVA":["2058"],"DATA_ANALYTICS":["1745","1789","2601","2057","5037","2971","2023","2162","2795"],"DSA":["6263"],"MERN":["2628"]}}`); </script> <script async src="https://www.geeksforgeeks.org/wp-content/themes/iconic-one/js/event-promotion.min.js?ver=4.5"></script>   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KDVRCT5');</script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-DWCCJLKX3X"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); // gtag('config', 'AW-474915276'); gtag('config', 'G-DWCCJLKX3X'); gtag('config', 'AW-796001856'); </script>  <div id="GFG_AD_Desktop_Stickyunit_1x1"></div>   <style> :root { --com-extra-icons-mobile-image: url(https://media.geeksforgeeks.org/auth-dashboard-uploads/Com-Extra-Icons13.svg); --write-experience-card-1: #ECF5F5; --write-experience-card-icon-1: #21898C; --write-experience-card-2: #EAF2F7; --write-experience-card-icon-2: #3079AC; --write-experience-card-3: #FDEFE6; --write-experience-card-icon-3: #F5A572; --write-experience-card-4: #F1F8F5; --write-experience-card-icon-4: #91C4AD; --write-experience-card-5: #EEE7FF; --write-experience-card-icon-5: #8B72C9; --write-experience-card-6: #F2F8E6; --write-experience-card-icon-6: #78C57F; --editor-button-text-color: #6E6E73; --write-modal-background: #fefefe; --experience-sidebar: #000; --left-bar-background: #FFFFFF; --write-redirect-container:#EAF2F7; --write-redirect-container-hover:#d6e7f2; } /* Dark Mode */ body[data-dark-mode="true"] { --write-modal-background: #161c23; --experience-sidebar: #000; --left-bar-background: #F0F3F5; } .popup-main { padding: 20px 18px 20px 18px; border-radius: 8px; } .popup-main .popup-heading { display: flex; align-items: center; color: #E9E9EA; margin-bottom: 10px; justify-content: space-between; } .popup-main .close-icon { background-image: var(--com-extra-icons-mobile-image);background-position: -15px -1651px;height: 22px;width: 22px;transform: scale(1); margin-bottom: 12px; cursor: pointer; } .popup-main .experience-card { color: #000; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; /* margin-bottom:10px; */ } .popup-main a:hover, .popup-main a:active, .popup-main a:visited { color: inherit; text-decoration: none; } .popup-main .exp-card1, .popup-main .exp-card2, .popup-main .exp-card3, .popup-main .exp-card4, .popup-main .exp-card5, .popup-main .exp-card6 { display: flex; align-items: center; border-radius: 10px; cursor: pointer; } .popup-main .exp-card1 .icon1, .popup-main .exp-card2 .icon2, .popup-main .exp-card3 .icon3, .popup-main .exp-card4 .icon4, .popup-main .exp-card5 .icon5, .popup-main .exp-card6 .icon6 { width: 80px; height: 80px; border-radius: 10px 0px 0px 10px; display: flex; align-items: center; justify-content: center; background: var(--write-experience-card-icon-1); } .popup-main .exp-card1 .icon1, .popup-main .exp-card2 .icon2, .popup-main .exp-card3 .icon3, .popup-main .exp-card4 .icon4, .popup-main .exp-card5 .icon5, .popup-main .exp-card6 .icon6 { width: 80px; height: 80px; border-radius: 10px 0px 0px 10px; display: flex; align-items: center; justify-content: center; } .popup-main .exp-card1 .icon1 { background: var(--write-experience-card-icon-1); } .popup-main .exp-card2 .icon2 { background: var(--write-experience-card-icon-2); } .popup-main .exp-card3 .icon3 { background: var(--write-experience-card-icon-3); } .popup-main .exp-card4 .icon4 { background: var(--write-experience-card-icon-4); } .popup-main .exp-card5 .icon5 { background: var(--write-experience-card-icon-5); } .popup-main .exp-card6 .icon6 { background: var(--write-experience-card-icon-6); } .popup-main .exp-card6 .icon6-image { background-image: url(https://media.geeksforgeeks.org/auth-dashboard-uploads/compass.svg); width: 46px; height: 30px; background-size: 30px; background-repeat: no-repeat; background-position: center; } .popup-main .exp-card1 .icon1-image { background-image: var(--com-extra-icons-mobile-image); width: 46px; height: 28px; background-position: -4px -812px; } .popup-main .exp-card2 .icon2-image { background-image: var(--com-extra-icons-mobile-image); width: 46px; height: 28px; background-position: -4px -888px; } .popup-main .exp-card3 .icon3-image { background-image: var(--com-extra-icons-mobile-image); width: 46px; height: 28px; background-position: -4px -848px; } .popup-main .exp-card4 .icon4-image { background-image: url(https://media.geeksforgeeks.org/auth-dashboard-uploads/competitive.svg); width: 46px; height: 30px; background-size: 30px; background-repeat: no-repeat; background-position: center; } .popup-main .exp-card5 .icon5-image { background-image: var(--com-extra-icons-mobile-image); width: 46px; height: 33px; background-position: -4px -1217px; } .popup-main .exp-card1 .exp-card1-text, .popup-main .exp-card2 .exp-card2-text, .popup-main .exp-card3 .exp-card3-text, .popup-main .exp-card4 .exp-card4-text, .popup-main .exp-card5 .exp-card5-text, .popup-main .exp-card6 .exp-card6-text { display: flex; align-items: center; border-radius: 0px 10px 10px 0px; height: 80px; width: calc(100% - 80px); } .popup-main .exp-card1 { justify-content: flex-start; background: var(--write-experience-card-1); } .popup-main .exp-card2 { justify-content: flex-start; background: var(--write-experience-card-2); } .popup-main .exp-card3 { justify-content: flex-start; background: var(--write-experience-card-3); } .popup-main .exp-card4 { justify-content: flex-start; background: var(--write-experience-card-4); } .popup-main .exp-card5 { justify-content: flex-start; background: var(--write-experience-card-5); } .popup-main .exp-card6 { justify-content: flex-start; background: var(--write-experience-card-6); } .popup-main span { font-family: var(--font-primary); font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; padding-left: 5px; padding-right: 5px; } #popup { display: none; background-color: var(--write-modal-background); padding: 20px; text-align: center; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1026; width: min(650px, calc(100% - 20px)); } .link-container-write{ display:flex; flex-direction:column; } .link-container-write > a { margin:7px 0px; } .phrase__container{ color:var(--color-gfg); border-radius: 6px; width: 100%; background-color:var(--write-redirect-container); padding: 15px; text-align: justify; font-size:14px; } .phrase__container:hover { color:var(--color-gfg) !important; background-color:var(--write-redirect-container-hover); } </style> <div class="popup-container"> <div id="popup" accesskey="" class="popup-main"> <div class="popup-heading"> <h2>What kind of Experience do you want to share?</h2> <div class="close-icon share-experience-modal-close"></div> </div>  <div class="experience-card"> <a class="exp-card5" href= "https://write.geeksforgeeks.org/posts-new?cid=e8fc46fe-75e7-4a4b-be3c-0c862d655ed0" target="_blank"> <div class="icon5"> <div class="icon5-image"></div> </div> <div class="exp-card5-text"> Interview Experiences </div> </a> <a class="exp-card1" href="https://write.geeksforgeeks.org/posts-new?cid=82536bdb-84e6-4661-87c3-e77c3ac04ede" target="_blank"> <div class="icon1"> <div class="icon1-image"></div> </div> <div class="exp-card1-text"> Admission Experiences </div> </a> <a class="exp-card6" href= "https://write.geeksforgeeks.org/posts-new?cid=5219b0b2-7671-40a0-9bda-503e28a61c31" target="_blank"> <div class="icon6"> <div class="icon6-image"></div> </div> <div class="exp-card6-text"> Career Journeys </div> </a> <a class="exp-card2" href="https://write.geeksforgeeks.org/posts-new?cid=22ae3354-15b6-4dd4-a5b4-5c7a105b8a8f" target="_blank"> <div class="icon2"> <div class="icon2-image"></div> </div> <div class="exp-card2-text"> Work Experiences </div> </a> <a class="exp-card3" href= "https://write.geeksforgeeks.org/posts-new?cid=c5e1ac90-9490-440a-a5fa-6180c87ab8ae" target="_blank"> <div class="icon3"> <div class="icon3-image"></div> </div> <div class="exp-card3-text"> Campus Experiences </div> </a> <a class="exp-card4" href= "https://write.geeksforgeeks.org/posts-new?cid=5ebb8fe9-b980-4891-af07-f2d62a9735f2" target="_blank"> <div class="icon4"> <div class="icon4-image"></div> </div> <div class="exp-card4-text"> Competitive Exam Experiences </div> </a> </div>  </div> <div id="overlay" onclick="toggleExperiencePopup()" style="display: block;min-height: 100vh;min-width: 100vw;position: fixed;top: 0;bottom: 0;right: 0;left: 0;display: none;justify-content: center;align-items: center;background: rgba(0,0,0,.702);z-index: 1025 !important;backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);word-break: keep-all;"></div> </div> <script> $('.share-experience-modal').click(function(e){ e.preventDefault(); var link = $(this).attr('href'); toggleExperiencePopup(link); }); function toggleExperiencePopup(link) { var popup = document.getElementById("popup"); var overlay = document.getElementById("overlay"); if (window.innerWidth < 992) { window.location.href = link; } else { popup.style.display = (popup.style.display === "block") ? "none" : "block"; overlay.style.display = (overlay.style.display === "block") ? "none" : "block"; } } $('.share-experience-modal-close').click(function(e){ var popup = document.getElementById("popup"); popup.style.display = 'none'; var overlay = document.getElementById("overlay"); overlay.style.display = 'none'; }); </script> </div> </body> </html>

CINXE.COM

Angular Cheat Sheet - A Basic Guide to Angular - GeeksforGeeks