{"id":13777,"date":"2024-03-15T07:51:18","date_gmt":"2024-03-15T07:51:18","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/"},"modified":"2025-08-05T23:19:37","modified_gmt":"2025-08-05T23:19:37","slug":"what-is-the-purpose-of-input-in-angular","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/","title":{"rendered":"Angular @Input Decorator Explained"},"content":{"rendered":"<p>In Angular, the @Input decorator is used to pass data from a parent component to a child component. By using the @Input decorator on the input property of the child component, you can bind properties in the parent component template and pass data to the child component.<\/p>\n<p>Input properties defined by the @Input decorator can receive data from the parent component and be used in the child component. The parent component can pass values to the input properties of the child component through property binding, allowing the child component to perform relevant operations or display using these values.<\/p>\n<p>The syntax of the @Input decorator is as follows:<\/p>\n<pre class=\"post-pre\"><code>@Input() propertyName: propertyType;\r\n<\/code><\/pre>\n<p>&#8220;Where propertyName represents the name of the input property, and propertyType represents the type of input property.&#8221;<\/p>\n<p>After using the @Input decorator, the parent component can pass values to the input properties of the child component in the template by binding attributes. For example, in the parent component, you can use it like this:<\/p>\n<pre class=\"post-pre\"><code>&lt;app-child [propertyName]=\"value\"&gt;&lt;\/app-child&gt;\r\n<\/code><\/pre>\n<p>In the child component, you can use the @Input decorator to receive values passed from the parent component and use them in the child component. For example, in the child component, you can use it like this:<\/p>\n<pre class=\"post-pre\"><code>@Input() propertyName: propertyType;\r\n<\/code><\/pre>\n<p>The purpose of the @Input decorator is to facilitate data transfer between parent and child components, allowing the parent component to pass data to the child component. This enables communication between components, enhancing their reusability and flexibility.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Angular, the @Input decorator is used to pass data from a parent component to a child component. By using the @Input decorator on the input property of the child component, you can bind properties in the parent component template and pass data to the child component. Input properties defined by the @Input decorator can [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[18461,18470,18469,2556,18471],"class_list":["post-13777","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-angular-input","tag-angular-decorators","tag-component-communication","tag-data-binding","tag-parent-child"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular @Input Decorator Explained - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn how Angular @Input enables parent-to-child data flow. Master component communication with this essential decorator.\" \/>\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.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular @Input Decorator Explained\" \/>\n<meta property=\"og:description\" content=\"Learn how Angular @Input enables parent-to-child data flow. Master component communication with this essential decorator.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T07:51:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-05T23:19:37+00:00\" \/>\n<meta name=\"author\" content=\"Jackson Davis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jackson Davis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/\"},\"author\":{\"name\":\"Jackson Davis\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350\"},\"headline\":\"Angular @Input Decorator Explained\",\"datePublished\":\"2024-03-15T07:51:18+00:00\",\"dateModified\":\"2025-08-05T23:19:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/\"},\"wordCount\":239,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"Angular @Input\",\"Angular Decorators\",\"Component Communication\",\"data binding\",\"Parent-Child\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/\",\"name\":\"Angular @Input Decorator Explained - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T07:51:18+00:00\",\"dateModified\":\"2025-08-05T23:19:37+00:00\",\"description\":\"Learn how Angular @Input enables parent-to-child data flow. Master component communication with this essential decorator.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular @Input Decorator Explained\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350\",\"name\":\"Jackson Davis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g\",\"caption\":\"Jackson Davis\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/jacksondavis\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular @Input Decorator Explained - Blog - Silicon Cloud","description":"Learn how Angular @Input enables parent-to-child data flow. Master component communication with this essential decorator.","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.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/","og_locale":"en_US","og_type":"article","og_title":"Angular @Input Decorator Explained","og_description":"Learn how Angular @Input enables parent-to-child data flow. Master component communication with this essential decorator.","og_url":"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T07:51:18+00:00","article_modified_time":"2025-08-05T23:19:37+00:00","author":"Jackson Davis","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Jackson Davis","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/"},"author":{"name":"Jackson Davis","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350"},"headline":"Angular @Input Decorator Explained","datePublished":"2024-03-15T07:51:18+00:00","dateModified":"2025-08-05T23:19:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/"},"wordCount":239,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["Angular @Input","Angular Decorators","Component Communication","data binding","Parent-Child"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/","url":"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/","name":"Angular @Input Decorator Explained - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T07:51:18+00:00","dateModified":"2025-08-05T23:19:37+00:00","description":"Learn how Angular @Input enables parent-to-child data flow. Master component communication with this essential decorator.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-purpose-of-input-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular @Input Decorator Explained"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350","name":"Jackson Davis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g","caption":"Jackson Davis"},"url":"https:\/\/www.silicloud.com\/blog\/author\/jacksondavis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/13777","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=13777"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/13777\/revisions"}],"predecessor-version":[{"id":157784,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/13777\/revisions\/157784"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=13777"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=13777"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=13777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}