How Communication takes between two sibling component in Angular 2 (plus)

Issue

I am working on angular 2. I found that the communication between the two sibling components or from child to parent is difficult. Even it was not mentioned in the angular 2 documentation

Would you please provide some information about it because the way two sibling components communicate is looking complex than the way a parent component communicates with its child using the ‘ViewChild’ decorator. But it is not possible to make a parent child relationship between two components always as per the project requirements.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var finalvalue = {};
var increment=0;
var uniqueKey = [];
var divv;
function myFunction() {
var a=[" ","number","text","textbox","date"];  
   divv=document.createElement("div");
   divv.id="grandparentss"
   $("#demo").prop("disabled",true);
   main(a); 
  document.body.appendChild(divv);
}
function main(aa){
var div = document.createElement("div");
div.classList.add("class1");
var input = document.createElement("input");
input.id="input";
input.value="";
input.placeholder="label";
input.classList.add("design");
input.addEventListener("keyup", function(){addButtonFunction()});
var select = document.createElement("select");
select.id="select";
select.classList.add("design");
select.addEventListener("change", function(){addButtonFunction()});
var i=0;
for(i;i<aa.length;i++){
  var option = document.createElement("option");
  var txt = document.createTextNode(aa[i]);
  option.appendChild(txt);
  select.appendChild(option);
 }

var add = document.createElement("button");
add.id="button";
add.classList.add("design");
var txt1=document.createTextNode("add");
add.appendChild(txt1);
add.setAttribute("disabled","");
add.addEventListener("click", function(){ if(uniqueKey.indexOf($("#input").val()) === -1){ getValue($("#input").val(),$("#select").val())};result(input.value);$("#select").val(""); $("#input").val("");addButtonFunction()});
var submit = document.createElement("button");
  submit.id = "submit"
  submit.classList.add("design");
  var txt2=document.createTextNode("submit"); 
  submit.appendChild(txt2);
  submit.setAttribute("disabled","");
  submit.addEventListener("click", function(){submiting()});
  div.appendChild(input);
  div.appendChild(select);
  div.appendChild(add);
  div.appendChild(submit);
  divv.appendChild(div); 
}


function addButtonFunction(){
  if($("#input").val() && $("#select").val()){
        document.getElementById("button").removeAttribute("disabled");
    } 
    else{
        document.getElementById("button").setAttribute("disabled","");
    }

}

function getValue(key,value){
  var div = document.createElement("div");
  div.id= key+"11"+increment;
  div.classList.add("form-inline");
  var div1 = document.createElement("div"); 
  div1.classList.add("form-group");
  div1.id= key+"$"+increment;
  var label = document.createElement("label");
  var txt = document.createTextNode(key);
  label.appendChild(txt);
  if(value === "textbox"){
  var input = document.createElement("textarea");
  }
  else{
  var input = document.createElement("input");
  input.classList.add("form-control");
  if(value === "date"){input.type="date"
  }
  else if(value === "number"){input.type="number"}
  input.placeholder="please write"+ key;
  }
  input.classList.add("form-control");
  input.id=key;
  input.addEventListener("input", function(){result(input.id);$(`#${input.id}`).val()});
  div1.appendChild(label);
  div1.appendChild(input);
  var add = document.createElement("button");
  var txt1=document.createTextNode("x");
  add.appendChild(txt1);
  add.addEventListener("click", function(){deleted(div.id,div1.id); deleteJson(input.id)});
  div1.appendChild(add);
  div.appendChild(div1);
  divv.appendChild(div);
  increment++;
}

function result(input){
 finalvalue[input]= $(`#${input}`).val();
 uniqueKey=Object.keys(finalvalue);
 if(Object.keys(finalvalue).length){document.getElementById("submit").removeAttribute("disabled");}else{document.getElementById("button").setAttribute("disabled","");}

}

function deleted(parent,child){
 document.getElementById(parent).removeChild(document.getElementById(child));
 document.getElementById("grandparentss").removeChild(document.getElementById(parent));
}

function deleteJson(input){
 delete finalvalue[input];
 uniqueKey=Object.keys(finalvalue);
}

function submiting(){
 document.getElementById("output").innerHTML= JSON.stringify(finalvalue);
   console.log(finalvalue);
}
</script>

<style>

.class1{
margin-top: 47px;
margin-bottom: 20px;
margin-left: 44px;
}

.form{
margin-top: 21px;
margin-left: 20px;

}
.form-inline{
    margin-top: 47px;
    margin-bottom: 20px;
    margin-left: 95px;
    }
.design{
margin-left: 57px;
}
.form-control{
margin-left: 65px;
}
</style>
</head>
<body>
<button onclick="myFunction()" class="form" id="demo">create Form</button>
<br><br>
<p id="output"></P>
</body>
</html>

Solution

Your structure should be like this

parent
  |-- Sibling 1
  |-- Sibling 2

If this is the case, you can use the ViewChild and Host directives.

In the parent :

@ViewChild(ChildOneComponent) one: ChildOneComponent;
@ViewChild(ChildTwoComponent) two: ChildTwoComponent;

In your children :

constructor(@Host() public parent: ParentComponent)

Now in The first child, you can use this :

this.parent.one.methodFromChildOne();

This is one of many examples, probably not the best one (thight coupling, gna gna gna), but it is the easiest one to pull and understand I think.

Answered By – user4676340

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.