Component property Binding in Angular and Vue3
Tags: angular, vue, javascript, component
Published: 2021-03-03 10:10:33

# How to detect change of child component property and assign changed value to local scope variable in both angular and vue3.


#### You can support me

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fv8jyjdsb975y5ztsl2e.png)](https://www.buymeacoffee.com/grdtech)

Both angular and vue3 provides better way to communicate between parent and child component using property binding. It is common practice to follow that `not manipulate child property object direcetly, rather we detect changes of child property and assign changed data to local component variable, and after that manipulate data inside component using local component variable.` 

**In Angular**,
To declare property binding inside child component, Angular provides `@Input()` decorator. With @Input() decorator we can access property value from child component and parent component needs to pass binded data back to child component using `[]` property binding data.

```html
// inside parent html.
<child [childProp] = "data" />

// inside child component.
@Input() childProp: unknown; 
```

**In Vue3**,
To declare property binding inside child component, Vue3 provides `props: { }` , inside props object declare all property variable.
and inside parent component pass property binding using `:props` syntax.

```html
// inside parent template
<Child :childProp = "data" />

//inside child component
props:{
     childProp: Array
}
``` 
**Now we see how can we assign property value to local variable in both angular and vue3**

*For Angular*, we are using `@Input()` setter function. this setter function is calling whenever new property value change occurs.

```typescript
export class ChildComponent implements OnInit {
  tasks = [];
  @Input("tasks") set onTaskChange(taskData) {
    this.tasks = taskData;
  }
  constructor() {}

  ngOnInit() {}
}
```
Above, `onTaskChange` setter function is called when `tasks` props changes and property data is assigned to local `tasks` class variable. 

*For Vue3*, it is very easy in vue3 using composition api. we are using `toRefs` from vue3 composition api `setup()` function.

```javascript
<script>
	import { toRefs } from 'vue';
	export default{
    name: 'Child',
    props:{
      tasks:{
        type: Array,
        default : [{'id': 0, 'taskName': 'Default Task'}]
      }
    },
    setup(props){
      const localTasks = toRefs(props).tasks;
      return {
        localTasks
      }
    }
  }
</script>
```
Above, setup function is called by vue with local props object. we are creating copy of tasks props using `toRefs` and assign value to localTasks variable, and we are only returning `localTasks` from setup(). anything return from setup() is accessible from template of component. now `localTasks` is reactive variable and whenever prop changes fire our localTasks gets copy of props and template gets new value.

### Angular Demo
{% stackblitz angular-ivy-4w5mqk %}

### Vue3 Demo

{% stackblitz vue-gaffej %}

### You can support me

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fv8jyjdsb975y5ztsl2e.png)](https://www.buymeacoffee.com/grdtech)