{"id":22048,"date":"2018-06-25T12:15:35","date_gmt":"2018-06-25T09:15:35","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=22048"},"modified":"2018-06-22T13:08:08","modified_gmt":"2018-06-22T10:08:08","slug":"accessing-child-public-scope-angular","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/","title":{"rendered":"Accessing a Child Component\u2019s Public Scope in Angular"},"content":{"rendered":"<p>I was asked to create an autocomplete component that would do some filtering on a list and include a \u201cclear\u201d button that could reset this filter. Not a problem, if it wasn\u2019t for the fact that it was this Angular newbie\u2019s first ever Angular story in an Angular 4 project. #Angular<\/p>\n<p>In a React-Redux setup (which is what I\u2019m used to), managing values is a matter of working with Redux. Resetting a value would mean dispatching an action that empties a certain part of your application state; in this case, the value of the <code>allLabels<\/code>\u00a0input:<\/p>\n<pre class=\"brush:js\">&lt;search-filter\r\n    id=\"allLabels\"\r\n    name=\"allLabels\"\r\n    flyoutSize=\"full\"\r\n    flyoutAlign=\"right\"\r\n    label=\"Find stuff\"\r\n    labelDeselect=\"Clear stuff\"\r\n    labelResults=\"Found stuff\"\r\n    labelNoResults=\"Couldn't find stuff!\"\r\n    placeholder=\"Look for stuff\"\r\n    inputDelay=\"0\"\r\n    [choices]=\"stuff\"\r\n    [showAllByDefault]=\"true\"\r\n    [remote]=\"true\"\r\n    (search)=\"findStuff($event)\"\r\n&gt;&lt;search-filter&gt;<\/pre>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/06\/kmf29z8mcofilidaqsbo.jpg\"><img decoding=\"async\" class=\"aligncenter wp-image-22052 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/06\/kmf29z8mcofilidaqsbo.jpg\" alt=\"label angular\" width=\"800\" height=\"107\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/06\/kmf29z8mcofilidaqsbo.jpg 800w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/06\/kmf29z8mcofilidaqsbo-300x40.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/06\/kmf29z8mcofilidaqsbo-768x103.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p>The API of this component did not seem to expose a way to modify the value like you would with a normal input using, for example, <code>ngModel<\/code>.\u00a0Additionally, in our case, this is a third party component, which means we cannot alter its codebase.<\/p>\n<p>When looking at the component\u2019s internal code, it\u2019s fairly easy to figure out that the public \u201creset\u201d method would reset the value. After attempting this, however, it didn\u2019t seem possible (to me) to access this method.<\/p>\n<pre class=\"brush:js\">this.categoryFilter.value = \u2018\u2019; \/\/ nopetynope\r\nthis.categoryFilter.reset(); \/\/ nopes<\/pre>\n<p>A colleague who is wise in the ways of Angular presented the solution to me:<br \/>\n\u201cJust use a viewchild decorator.\u201d<\/p>\n<p>Looking at the <a href=\"https:\/\/angular.io\/api\/core\/ViewChild\" target=\"_blank\" rel=\"noopener\">documentation<\/a>, though, I was none the wiser. What is it? What does it do? How do I use it? #clueless<\/p>\n<h2>The viewchild decorator<\/h2>\n<p>Thankfully, my colleague (who soothed my ego by saying the documentation \u201cmight not be very clear\u201d) explained it to me. Allow me to explain!<\/p>\n<p>First, there\u2019s the matter of referencing the component:<\/p>\n<pre class=\"brush:js\">&lt;search-filter\r\n   #categoryFilter\r\n   id=\"status\"\r\n\u2026 \/&gt;<\/pre>\n<p>Then, we \u201ccouple\u201d this reference with a viewchild decorator. (Not coming from an OOP background, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Decorator_pattern\" target=\"_blank\" rel=\"noopener\">the concept of decorators<\/a> was also new to me, but it\u2019s fairly easy to understand when you read up about it.)<\/p>\n<pre class=\"brush:js\">@ViewChild('categoryFilter') categoryFilter: SearchFilterComponent;<\/pre>\n<p>This allows us to reference any \u201cpublic\u201d methods or properties of our <code>categoryFilter<\/code> component &#8211; for example, the \u201cclear\u201d method!<\/p>\n<pre class=\"brush:js\">this.categoryFilter.clear(); \/\/ does the clearing!<\/pre>\n<p>So, putting it all together it looks like this:<\/p>\n<pre class=\"brush:js\">&lt;searchFilter.component.html&gt;\r\n&lt;search-filter\r\n   #categoryFilter\r\n   id=\"status\" \/&gt;\r\n...\r\n&lt;button title=\"clear categories\" (click)=\"clearCategories()\"&gt;clear&lt;\/button&gt;\r\n...\r\n&lt;searchFilter.component.ts&gt;\r\n@Component({\r\n    selector: 'search-filter',\r\n    templateUrl: '.\/searchFilter.component.html',\r\n    styleUrls: ['.\/searchFilter.component.css']\r\n})\r\nexport class SearchFilter implements OnInit {\r\n    @ViewChild('categoryFilter') categoryFilter: SearchFilterComponent;\r\n...\r\nclearCategories(): void {\r\n    this.categoryFilter.clear(); \/\/ does the clearing!\r\n}\r\n...\r\n}<\/pre>\n<p>The viewchild decorator is a useful pattern in cases where you need to reference (and call) a child component(\u2018s methods), but can\u2019t alter the codebase for whatever reason. Do you know of an alternative, or even a better way? Feel free to let us know.<\/p>\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td>Published on Web Code Geeks with permission by Jeroen Savat, partner at our <a href=\"\/\/www.webcodegeeks.com\/join-us\/wcg\/\" target=\"_blank\" rel=\"noopener\">WCG program<\/a>. See the original article here: <a href=\"https:\/\/www.foreach.be\/blog\/accessing-a-child-component-s-public-scope-in-angular\" target=\"_blank\" rel=\"noopener\">Accessing a Child Component\u2019s Public Scope in Angular<\/a><\/p>\n<p>Opinions expressed by Web Code Geeks contributors are their own.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>I was asked to create an autocomplete component that would do some filtering on a list and include a \u201cclear\u201d button that could reset this filter. Not a problem, if it wasn\u2019t for the fact that it was this Angular newbie\u2019s first ever Angular story in an Angular 4 project. #Angular In a React-Redux setup &hellip;<\/p>\n","protected":false},"author":6602,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-22048","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Accessing a Child Component\u2019s Public Scope in Angular - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Interested to learn more about Angular? Check out our article where we access a child component&#039;s public scope in Angular to do some filtering on a list!\" \/>\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.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accessing a Child Component\u2019s Public Scope in Angular - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Interested to learn more about Angular? Check out our article where we access a child component&#039;s public scope in Angular to do some filtering on a list!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-25T09:15:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeroen Savat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@iframeskills\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeroen Savat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/\"},\"author\":{\"name\":\"Jeroen Savat\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/daf039e47e6063098add86bcd22a30a4\"},\"headline\":\"Accessing a Child Component\u2019s Public Scope in Angular\",\"datePublished\":\"2018-06-25T09:15:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/\"},\"wordCount\":418,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"articleSection\":[\"Angular.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/\",\"name\":\"Accessing a Child Component\u2019s Public Scope in Angular - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2018-06-25T09:15:35+00:00\",\"description\":\"Interested to learn more about Angular? Check out our article where we access a child component's public scope in Angular to do some filtering on a list!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular.js\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Accessing a Child Component\u2019s Public Scope in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/daf039e47e6063098add86bcd22a30a4\",\"name\":\"Jeroen Savat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/82a7865744be76a131eaff7f98810993db40eb6102f06586e715d2a9353b43c5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/82a7865744be76a131eaff7f98810993db40eb6102f06586e715d2a9353b43c5?s=96&d=mm&r=g\",\"caption\":\"Jeroen Savat\"},\"sameAs\":[\"https:\/\/www.foreach.be\/blog\/\",\"https:\/\/www.linkedin.com\/in\/jeroensavat\/\",\"https:\/\/x.com\/iframeskills\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/jeroen-savat\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Accessing a Child Component\u2019s Public Scope in Angular - Web Code Geeks - 2026","description":"Interested to learn more about Angular? Check out our article where we access a child component's public scope in Angular to do some filtering on a list!","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.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/","og_locale":"en_US","og_type":"article","og_title":"Accessing a Child Component\u2019s Public Scope in Angular - Web Code Geeks - 2026","og_description":"Interested to learn more about Angular? Check out our article where we access a child component's public scope in Angular to do some filtering on a list!","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2018-06-25T09:15:35+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Jeroen Savat","twitter_card":"summary_large_image","twitter_creator":"@iframeskills","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Jeroen Savat","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/"},"author":{"name":"Jeroen Savat","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/daf039e47e6063098add86bcd22a30a4"},"headline":"Accessing a Child Component\u2019s Public Scope in Angular","datePublished":"2018-06-25T09:15:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/"},"wordCount":418,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","articleSection":["Angular.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/","name":"Accessing a Child Component\u2019s Public Scope in Angular - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2018-06-25T09:15:35+00:00","description":"Interested to learn more about Angular? Check out our article where we access a child component's public scope in Angular to do some filtering on a list!","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/accessing-child-public-scope-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Angular.js","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/"},{"@type":"ListItem","position":4,"name":"Accessing a Child Component\u2019s Public Scope in Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/daf039e47e6063098add86bcd22a30a4","name":"Jeroen Savat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/82a7865744be76a131eaff7f98810993db40eb6102f06586e715d2a9353b43c5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/82a7865744be76a131eaff7f98810993db40eb6102f06586e715d2a9353b43c5?s=96&d=mm&r=g","caption":"Jeroen Savat"},"sameAs":["https:\/\/www.foreach.be\/blog\/","https:\/\/www.linkedin.com\/in\/jeroensavat\/","https:\/\/x.com\/iframeskills"],"url":"https:\/\/www.webcodegeeks.com\/author\/jeroen-savat\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/22048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/6602"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=22048"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/22048\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/909"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=22048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=22048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=22048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}