{"id":1302,"date":"2018-12-02T10:02:41","date_gmt":"2018-12-02T09:02:41","guid":{"rendered":"https:\/\/blog.thecodecampus.de\/?p=1302"},"modified":"2025-04-22T10:13:29","modified_gmt":"2025-04-22T08:13:29","slug":"material-2-sticky-footer-mat-sidenav","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/","title":{"rendered":"Material 2: Sticky Footer with Mat Sidenav"},"content":{"rendered":"<p>My guess is your using Angular in combination with <a href=\"https:\/\/material.angular.io\/\">Angular Material<\/a> and you desperately need a <a href=\"https:\/\/css-tricks.com\/couple-takes-sticky-footer\/\">sticky footer<\/a>, ideally, in a variable height. No need to look any further. This article will provide you with a basic solution for given circumstances.<\/p>\n<p><strong>This article was updated and tested for Angular 7 and Material 2 Version 7.1.1<\/strong><\/p>\n<p>A very common use case for the <a href=\"https:\/\/material.angular.io\/components\/sidenav\/overview\">Sidenav<\/a> of <a href=\"https:\/\/material.angular.io\/\">Material 2<\/a> is the use in a layout with a sticky footer.\u00a0Unfortunately, the documentation of the <code>&lt;mat-sidenav&gt;<\/code> does not show how to do this best.\u00a0But that&#8217;s not a big deal, because you can achieve your goal quickly if you know how to use <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">Flexbox<\/a>.<\/p>\n<p>We assume that routing is used. In addition to the sticky footer, we want to make sure that the component that is included via routing also takes on the full height. In order to do so we add a <code>display:block;<\/code> and and <code>flex:1;<\/code> to first level children of our main HTML tag.<\/p>\n<p>You can find a demo <a href=\"https:\/\/cankattwinkel.github.io\/material-2-sticky-footer-mat-sidenav\/\">here<\/a>. And <a href=\"https:\/\/github.com\/CanKattwinkel\/material-2-sticky-footer-mat-sidenav\">this<\/a> is the repository.<\/p>\n<p><a href=\"https:\/\/www.thecodecampus.de\/schulungen\/angular\" style=\"display: inline-block;\">\n<picture><source srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_frieder_WP_big.png\" media=\"(min-width: 1024px)\"><source srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_frieder_WP_medium.png\" media=\"(min-width: 600px)\"><img decoding=\"async\" src=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_frieder_WP_small.png\" alt=\"Angular Schulungen\" class=\"alignnone size-full wp-image-38\">\n<\/picture>\n<\/a><\/p>\n<p>Below is a shortened version of the template for our Sidenav (demo location: <code>src\/app\/app.component.html<\/code>).<\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"app.component.html\">&lt;mat-sidenav-container class=\"all-wrap\"&gt;\r\n\r\n  &lt;mat-sidenav #sidenav over&gt;\r\n    &lt;mat-list&gt;\r\n      &lt;mat-list-item&gt;...&lt;\/mat-list-item&gt;\r\n    &lt;\/mat-list&gt;\r\n  &lt;\/mat-sidenav&gt;\r\n\r\n  &lt;mat-sidenav-content class=\"page-wrap ...\"&gt;\r\n\r\n    &lt;mat-toolbar&gt;\r\n      &lt;mat-toolbar-row&gt;\r\n        &lt;span&gt;\r\n          &lt;mat-icon\r\n            (click)=\"sidenav.open()\"\r\n          &gt;menu\r\n          &lt;\/mat-icon&gt;\r\n        &lt;\/span&gt;\r\n        &lt;span&gt;&lt;h1&gt;Toolbar&lt;\/h1&gt;&lt;\/span&gt;\r\n      &lt;\/mat-toolbar-row&gt;\r\n    &lt;\/mat-toolbar&gt;\r\n\r\n    ...\r\n\r\n    &lt;main class=\"content\"&gt;\r\n      &lt;router-outlet&gt;&lt;\/router-outlet&gt;\r\n    &lt;\/main&gt;\r\n\r\n    &lt;footer&gt;\r\n      &lt;h2&gt;Sticky Footer !!&lt;\/h2&gt;\r\n      &lt;p&gt;... with variable height&lt;\/p&gt;\r\n    &lt;\/footer&gt;\r\n\r\n  &lt;\/mat-sidenav-content&gt;\r\n\r\n&lt;\/mat-sidenav-container&gt;<\/pre>\n<p>The corresponding styles can be written in the global <code>styles.scss<\/code> or in the corresponding style sheet (demo location: <code>src\/app\/app.component.scss<\/code>).<\/p>\n<pre class=\"lang:css decode:true \" title=\"app.component.scss\">\/*\r\n * Actual Sticky Footer Styles\r\n *\/\r\n\r\n.all-wrap {\r\n  min-height: 100vh; \/\/ same height as browser window height\r\n}\r\n\r\n.page-wrap {\r\n  display: flex;\r\n  flex-direction: column;\r\n  min-height: 100vh; \/\/ same height as browser window height\r\n}\r\n\r\n.content {\r\n  flex: 1; \/\/ child will set to an equal size inside the container\r\n}\r\n\r\n\r\n\/*\r\n * Make the component injected by &lt;router-outlet&gt; full height:\r\n *\/\r\n\r\nmain {\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  \/\/ Select all direct descendants only of the &lt;main&gt; element\r\n  \/\/ that are not &lt;router-outlet&gt; elements:\r\n  &gt; *:not(router-outlet) {\r\n\r\n    flex: 1; \/\/ child will set to an equal size inside the container\r\n    display: block;\r\n\r\n  }\r\n\r\n}<\/pre>\n<p>And that&#8217;s it. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>My guess is your using Angular in combination with Angular Material and you desperately need a sticky footer, ideally, in a variable height. No need to look any further. This article will provide you with a basic solution for given circumstances. This article was updated and tested for Angular 7 and Material 2 Version 7.1.1 [&#8230;]<br \/><a class=\"meta-big\" href=\"https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/\"> READ MORE<\/a><\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,94,2],"tags":[],"class_list":["post-1302","post","type-post","status-publish","format-standard","hentry","category-angular","category-css","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Material 2: Sticky Footer with Mat Sidenav - Web Development Blog<\/title>\n<meta name=\"description\" content=\"Elevate Material 2 UI! Unlock sticky footers and Mat Sidenav brilliance. Optimize layout control effortlessly. Enhance your Angular app styling now!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Material 2: Sticky Footer with Mat Sidenav - Web Development Blog\" \/>\n<meta property=\"og:description\" content=\"Elevate Material 2 UI! Unlock sticky footers and Mat Sidenav brilliance. Optimize layout control effortlessly. Enhance your Angular app styling now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-12-02T09:02:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-22T08:13:29+00:00\" \/>\n<meta name=\"author\" content=\"Christian Heitmann\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christian Heitmann\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"2\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/material-2-sticky-footer-mat-sidenav\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/material-2-sticky-footer-mat-sidenav\\\/\"},\"author\":{\"name\":\"Christian Heitmann\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/79983c87aa083289ac2da208c58530d1\"},\"headline\":\"Material 2: Sticky Footer with Mat Sidenav\",\"datePublished\":\"2018-12-02T09:02:41+00:00\",\"dateModified\":\"2025-04-22T08:13:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/material-2-sticky-footer-mat-sidenav\\\/\"},\"wordCount\":209,\"commentCount\":12,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/material-2-sticky-footer-mat-sidenav\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/angular-schulungen_frieder_WP_small.png\",\"articleSection\":[\"Angular\",\"CSS\",\"JavaScript\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/material-2-sticky-footer-mat-sidenav\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/material-2-sticky-footer-mat-sidenav\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/material-2-sticky-footer-mat-sidenav\\\/\",\"name\":\"Material 2: Sticky Footer with Mat Sidenav - Web Development Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/material-2-sticky-footer-mat-sidenav\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/material-2-sticky-footer-mat-sidenav\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/angular-schulungen_frieder_WP_small.png\",\"datePublished\":\"2018-12-02T09:02:41+00:00\",\"dateModified\":\"2025-04-22T08:13:29+00:00\",\"description\":\"Elevate Material 2 UI! Unlock sticky footers and Mat Sidenav brilliance. Optimize layout control effortlessly. Enhance your Angular app styling now!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/material-2-sticky-footer-mat-sidenav\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/material-2-sticky-footer-mat-sidenav\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/material-2-sticky-footer-mat-sidenav\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/angular-schulungen_frieder_WP_small.png\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/angular-schulungen_frieder_WP_small.png\",\"width\":720,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/material-2-sticky-footer-mat-sidenav\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Material 2: Sticky Footer with Mat Sidenav\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"name\":\"Web Development tips and tricks - theCodeCampus Blog\",\"description\":\"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\",\"name\":\"theCodeCampus\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"width\":156,\"height\":156,\"caption\":\"theCodeCampus\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/79983c87aa083289ac2da208c58530d1\",\"name\":\"Christian Heitmann\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/christian-heitmann-tcc-author-96x96.webp\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/christian-heitmann-tcc-author-96x96.webp\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/christian-heitmann-tcc-author-96x96.webp\",\"caption\":\"Christian Heitmann\"},\"description\":\"Hi, I am a software engineer from Germany with a focus on frontend technologies and an affinity for everything related to UI\\\/UX. However, my greatest challenge to date has been learning Japanese.\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/author\\\/cheitmann\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Material 2: Sticky Footer with Mat Sidenav - Web Development Blog","description":"Elevate Material 2 UI! Unlock sticky footers and Mat Sidenav brilliance. Optimize layout control effortlessly. Enhance your Angular app styling now!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/","og_locale":"de_DE","og_type":"article","og_title":"Material 2: Sticky Footer with Mat Sidenav - Web Development Blog","og_description":"Elevate Material 2 UI! Unlock sticky footers and Mat Sidenav brilliance. Optimize layout control effortlessly. Enhance your Angular app styling now!","og_url":"https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2018-12-02T09:02:41+00:00","article_modified_time":"2025-04-22T08:13:29+00:00","author":"Christian Heitmann","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"Christian Heitmann","Gesch\u00e4tzte Lesezeit":"2\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/"},"author":{"name":"Christian Heitmann","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/79983c87aa083289ac2da208c58530d1"},"headline":"Material 2: Sticky Footer with Mat Sidenav","datePublished":"2018-12-02T09:02:41+00:00","dateModified":"2025-04-22T08:13:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/"},"wordCount":209,"commentCount":12,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_frieder_WP_small.png","articleSection":["Angular","CSS","JavaScript"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/","url":"https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/","name":"Material 2: Sticky Footer with Mat Sidenav - Web Development Blog","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_frieder_WP_small.png","datePublished":"2018-12-02T09:02:41+00:00","dateModified":"2025-04-22T08:13:29+00:00","description":"Elevate Material 2 UI! Unlock sticky footers and Mat Sidenav brilliance. Optimize layout control effortlessly. Enhance your Angular app styling now!","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/#primaryimage","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_frieder_WP_small.png","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/angular-schulungen_frieder_WP_small.png","width":720,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/material-2-sticky-footer-mat-sidenav\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Material 2: Sticky Footer with Mat Sidenav"}]},{"@type":"WebSite","@id":"https:\/\/www.thecodecampus.de\/blog\/#website","url":"https:\/\/www.thecodecampus.de\/blog\/","name":"Web Development tips and tricks - theCodeCampus Blog","description":"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.","publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thecodecampus.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.thecodecampus.de\/blog\/#organization","name":"theCodeCampus","url":"https:\/\/www.thecodecampus.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","width":156,"height":156,"caption":"theCodeCampus"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/79983c87aa083289ac2da208c58530d1","name":"Christian Heitmann","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/06\/christian-heitmann-tcc-author-96x96.webp","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/06\/christian-heitmann-tcc-author-96x96.webp","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/06\/christian-heitmann-tcc-author-96x96.webp","caption":"Christian Heitmann"},"description":"Hi, I am a software engineer from Germany with a focus on frontend technologies and an affinity for everything related to UI\/UX. However, my greatest challenge to date has been learning Japanese.","url":"https:\/\/www.thecodecampus.de\/blog\/author\/cheitmann\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/1302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/comments?post=1302"}],"version-history":[{"count":17,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/1302\/revisions"}],"predecessor-version":[{"id":3411,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/1302\/revisions\/3411"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=1302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=1302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=1302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}