{"flag":true,"single":true,"pageTitle":"What is Child Component | Custom Property Binding | @Input()| Angular 15+","post":{"id":59,"user_id":"1","slug":"what-is-child-component-custom-property-binding-components-angular-15--zlvj","title":"What is Child Component | Custom Property Binding | @Input()| Angular 15+","body":"

We can pass data from component class to view template and vice versa using property binding, string interpolation and event binding.
We can also pass data from parent component to child component and vice versa. We use @lnput & @Output<\/strong> decorator for that.<\/p>\r\n

You can use your components in other components as well instedd of parent component<\/p>\r\n

Custom Property Binding <\/strong><\/p>\r\n

We can pass data from parent component to child component using @lnput decorator.<\/p>\r\n

We also call it custom property binding because here we bind the custom properties of child component class with the property or method of parent component class.<\/p>\r\n

1. First of all import Input module in child component<\/p>\r\n

import { Component, Input } from '@angular\/core';<\/code><\/pre>\r\n
2. Add Input decorator in child component, it will be used to get data from parent component<\/p>\r\n
@Input() fromParentIGotvalue:number = 0;<\/code><\/pre>\r\n
SO HERE is example:we create parent component<\/p>\r\n
products.component.html<\/strong><\/p>\r\n
[CHILDCOMPONENT-VARIABLE] =\"PARENTCOMPONENT\"<\/strong><\/p>\r\n
<div>\r\n\t<app-filter [fromParentIGotvalue]=\"ihaveProducts\"><\/app-filter>\r\n\tI have {{ihaveProducts}} Products\r\n<\/div><\/code><\/pre>\r\n
products.component.js<\/strong><\/p>\r\n
export class ProductsComponent {\r\n    ihaveProducts:number = 50;\r\n    IhaveFreeProducts = 12;\r\n}<\/code><\/pre>\r\n
app-filter is child component in parent, and we pass IhaveFreeProducts <\/strong>variable to that child component<\/p>\r\n
Now access this in child component<\/p>\r\n
filter.component.html<\/strong><\/p>\r\n
<p>filter works! and have {{freeCourses}} free courses<\/p>\r\n<p>In parent I found  {{freeproducts}} free courses<\/p><\/code><\/pre>\r\n
filter.component.ts<\/strong><\/p>\r\n
we import Input and use decorater to access the value<\/p>\r\n
import { Component, Input } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-filter',\r\n  templateUrl: '.\/filter.component.html',\r\n  styleUrls: ['.\/filter.component.css']\r\n})\r\nexport class FilterComponent {\r\n  freeCourses:number = 10;\r\n  @Input() freeproducts:number = 0;\r\n}\r\n<\/code><\/pre>","category_id":"13","is_private":"0","created_at":"2023-03-27T23:09:25.000000Z","updated_at":"2023-03-31T03:02:54.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"We can pass data from component class to view template and vice versa using property binding, string interpolation and event binding.We - What is Child Component | Custom Property Binding | @Input()| Angular 15+ (Updated: March 31, 2023) - Read more about What is Child Component | Custom Property Binding | @Input()| Angular 15+ at my programming site [SITE]","categories":[]}