{"id":673,"date":"2023-10-16T10:41:43","date_gmt":"2023-10-16T16:41:43","guid":{"rendered":"https:\/\/kop.lat\/blog\/?p=673"},"modified":"2023-10-16T10:41:43","modified_gmt":"2023-10-16T16:41:43","slug":"input-example-in-angular","status":"publish","type":"post","link":"https:\/\/kop.lat\/blog\/input-example-in-angular\/","title":{"rendered":"@Input() example in Angular"},"content":{"rendered":"\n

<\/p>\n\n\n\n

Certainly! Here’s an example of how to use the @Input<\/code> decorator in Angular to pass data from a parent component to a child component:<\/p>\n\n\n\n

    \n
  1. Create a child component: Let’s create a simple child component that receives data from its parent component.<\/li>\n<\/ol>\n\n\n\n
       ng generate component child<\/code><\/pre>\n\n\n\n
    In child.component.ts<\/code>, define an @Input<\/code> property to receive data from the parent component:<\/p>\n\n\n\n
    <\/code><\/pre>\n\n\n\n
    <\/div>
    <\/div>
    <\/div><\/div>
    Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div>
       import { Component, Input } from '@angular\/core';\n\n   @Component({\n     selector: 'app-child',\n     template: `\n       <div>\n         <h2>Child Component<\/h2>\n         <p>Data from parent: {{ dataFromParent }}<\/p>\n       <\/div>\n     `,\n   })\n   export class ChildComponent {\n     @Input() dataFromParent: string;\n   }<\/code><\/pre><\/div><\/div>\n\n\n\n
      \n
    1. Create a parent component: In your parent component, you can pass data to the child component using the @Input<\/code> property. In parent.component.html<\/code>, include the child component and bind the dataFromParent<\/code> property:<\/li>\n<\/ol>\n\n\n\n
      <\/code><\/pre>\n\n\n\n
      <\/div>
      <\/div>
      <\/div><\/div>
      Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div>
         <div>\n     <h1>Parent Component<\/h1>\n     <app-child [dataFromParent]=\"message\"><\/app-child>\n   <\/div><\/code><\/pre><\/div><\/div>\n\n\n\n
      In parent.component.ts<\/code>, define the message<\/code> property:<\/p>\n\n\n\n
      \n<\/code><\/pre>\n\n\n\n
      <\/div>
      <\/div>
      <\/div><\/div>
      Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div>
      import { Component } from '@angular\/core';\n\n@Component({\n     selector: 'app-parent',\n     templateUrl: '.\/parent.component.html',\n   })\n   export class ParentComponent {\n     message = 'Hello from the parent component!';\n   }<\/code><\/pre><\/div><\/div>\n\n\n\n
        \n
      1. Use the parent component: In your app module, make sure to include both the parent and child components in the declarations section of the module.<\/li>\n\n\n\n
      2. Run your application: Run your Angular application to see the @Input<\/code> in action:<\/li>\n<\/ol>\n\n\n\n
           ng serve<\/code><\/pre>\n\n\n\n
        The child component receives and displays the dataFromParent<\/code> value passed from the parent component.<\/p>\n\n\n\n
        <\/p>\n","protected":false},"excerpt":{"rendered":"
        Certainly! Here’s an example of how to use the @Input decorator in Angular to pass data from a parent component to a child component: In child.component.ts, define an @Input property to receive data from the parent component: In parent.component.ts, define the message property: The child component receives and displays the dataFromParent value passed from the […]<\/p>\n","protected":false},"author":1,"featured_media":227,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/673"}],"collection":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/comments?post=673"}],"version-history":[{"count":1,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/673\/revisions"}],"predecessor-version":[{"id":674,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/673\/revisions\/674"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/media\/227"}],"wp:attachment":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/media?parent=673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/categories?post=673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/tags?post=673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}