Pass by Value and Pass by Reference in Angular

var a = 5
var b = ["Mumbai","Bangalore"];
var a = 5
var b = ["Mumbai","Bangalore"];
var c = a;
var d = b;
console.log('a:'+a);
console.log('c:'+c);
console.log('b:'+b);
console.log('d:'+d);
a:5
c:5
b:Mumbai,Bangalore
d:Mumbai,Bangalore
a = 10
b.push("Delhi");
console.log('a:'+a);
console.log('c:'+c);
console.log('b:'+b);
console.log('d:'+d);
a:10
c:5
b:Mumbai,Bangalore,Delhi
d:Mumbai,Bangalore,Delhi
ng new parentchild
ng g c child
import { Component } from '@angular/core';@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'parentchild';
parentName = "Passed data";
parentArr = ["Bangalore","Delhi"];
}
<p>parent works</p>
Variable in parent: {{parentName}}
<div *ngFor="let element of parentArr">
<p>Array values in parent: {{element}}</p>
</div>
<app-child [name] = "parentName" [arr]="parentArr"></app-child>
import { Component, OnInit, Input } from '@angular/core';@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input()
name: string;
@Input()
arr: any;
constructor() { }ngOnInit() {}btnClicked(evtData){
this.name = 'Changed '+ this.name;
this.arr.push("Mumbai");
}
}
<p>child works!</p>
Variable in child: {{name}}
<div *ngFor="let element of arr">
<p>Array values in child: {{element}}</p>
</div>
<button (click)="btnClicked($event)">Click Me!</button>

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

D3 and real-time graphs. Optimizing performance.

Build your own Vue.js UI library based on Vuetify and publish it to NPM

Problems of JavaScript game development

New concept “Dep” to easily manage component dependency in Angular

Five React hooks useful in any project.

How Metamask Detects The Gas Price

Isomorphisms and round trip data transformations

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Akshay Nayak

Akshay Nayak

More from Medium

Construction Industry is Mostly Fundamentally changed by CAD Drafting and Drawing

CAD drafting and drawing Services

The Art of Reset | Pras Michel | TEDxWaterStreet

Siberian Cat Breed Guide — History, Personality-Temperament, Grooming

Listen to the Park Ranger